关闭按钮与覆盖使用pseudoelements

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