css - 背景颜色改变元素的颜色，而不是实际的背景 - 如何克服这个问题？

Question

我正在尝试为以下元素添加背景（标记为红色）：https ://i.imgur.com/uDsKR3C.jpg

它的代码如下所示：

.otfm-sp__title::after, .otfm-sp__title::before {
    background-color: #777;
    content: " ";
    display: block;
    height: 2px;
    left: 16px;
    opacity: 1;
    position: absolute;
    top: 50%;
    -webkit-transition: all .2s cubic-bezier(.42,0,.58,1);
    transition: all .2s cubic-bezier(.42,0,.58,1);
    width: 14px;
}

当我更改背景颜色属性时，改变的是加号图标的颜色，而不是实际背景。我觉得我已经尝试了一切 - 有没有人知道如何克服它并为这个小“+”图标添加实际背景？

标签： css

Answer 1

感谢您分享链接，我已经看到了标记，问题是您使用了 ::before 和 ::after 伪元素作为加号。

要达到您想要的效果，您可以使用以下两种方法之一。

方法：1

  /*apply box-shadow to one of the pseudo elements*/
   
  ::before {
     box-shadow: 0 0 0 10px red;
  }

方法：2在html中，您可以像这样为加号创建一个单独的div。

.plus {
  background-color: red;
}

<div class="plus"> + </div>