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

Question

我正在尝试为以下元素(标记为红色)添加背景:https://i.stack.imgur.com/zXq46.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;
}

当我改变background-color属性时，改变的是加号图标的颜色，而不是它的实际背景。我觉得我什么都试过了——有没有人知道如何克服它，并为这个小小的"+"添加一个实际的背景?图标?

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>