使用僞元素覆蓋的關閉按鈕

Question

我有以下關閉按鈕及其後面的覆蓋（見附圖）。如何使用CSS和僞元素對按鈕進行編碼？

HTML

<div class="outer"> 
    <div class="close"></div> 
</div> 

CSS

.outer { 
    background: rgba(0, 0, 0, 0.2); 
    width: 46px; 
    height: 46px; 
    border-radius: 5px; 
    position: absolute; 
    top: 22px; 
    right: 26px; 
    cursor: pointer; 
} 


.close { 
    position: relative; 
    background: url('../images/close.svg'); 
    background-size: 23px 23px; 
    background-repeat: no-repeat; 
    background-position: center center; 
    width: 46px; 
    height: 46px; 
    z-index: 100; 
    outline: none; 
    cursor: pointer; 
    opacity: 0.9; 

    &:hover { 
     opacity: 1.0; 
    } 
} 

我不希望有一個內部和外部的div。我只想要一個元素並使用僞元素（之前或之後）在關閉按鈕後面添加疊加層。

我該如何使用僞元素來做到這一點？

Answer 1

這裏是你的代碼看起來就像使用一個DIV和::before僞元素。有關僞元素的更多信息可以參見here。

HTML

<div class="close"></div> 

SCSS

.close { 
    background: rgba(0, 0, 0, 0.2); 
    width: 46px; 
    height: 46px; 
    border-radius: 5px; 
    position: absolute; 
    top: 22px; 
    right: 26px; 
    cursor: pointer; 

    /* Pseudo Element */ 
    &::before { 
     content: ''; /* set content to empty */ 
     display: block; /* display is inline by default */ 
     position: relative; 
     background: url('../images/close.svg'); 
     background-size: 23px 23px; 
     background-repeat: no-repeat; 
     background-position: center center; 
     width: 46px; 
     height: 46px; 
     z-index: 100; 
     outline: none; 
     cursor: pointer; 
     opacity: 0.9; 
    } 

    &:hover { 
     &::before { 
     opacity: 1.0; 
     } 
    } 
}