закрыть кнопку с наложением с использованием псевдоэлементов

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; 
     } 
    } 
}