请教：CSS中伪元素的代码如何优化？

wlue

最近在学CSS，知道CSS中相同部分的代码可以通过标签、类等选择器编写。但是不清楚对于伪元素的相同代码如何进行优化，如下例中有许多相同的代码如何优化？谢谢！

#div3::before{
    content: '';
    width: 50px;
    height: 50px;
    background-color: white;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    border: 15px solid black;
    margin: 50px auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 25px;
}
#div3::after{
    content: '';
    width: 50px;
    height: 50px;
    background-color: black;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    border: 15px solid white;
    margin: 50px auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 25px;
    top: -50px;
}

一线码农

额，相同的 写在一起就好了呀 #div:b,#div:a {}

wlue

一线码农 发表于 2021-1-2 09:38
额，相同的 写在一起就好了呀 #div:b,#div:a {}

谢谢！恕我愚钝，像我这个例子，一个是#div3 之前，一个是之后，那么应该如何写？是这样子吗？
#div3::before,#div3::after{}吗？
或者 #div3::*{}
或者 #div3::before,after{}
哪一个正确？

一线码农

wlue 发表于 2021-1-2 09:49
谢谢！恕我愚钝，像我这个例子，一个是#div3 之前，一个是之后，那么应该如何写？是这样子吗？
#div3::b ...

额 都不对...

#div3::before,#div3::after {


}

wlue

一线码农 发表于 2021-1-2 09:53
额 都不对...

#div3::before,#div3::after {

请教，那么应该如何写呢？

无常方便面

把一样的写一块，剩下不一样的单拿出来就好

一线码农

wlue 发表于 2021-1-2 09:55
请教，那么应该如何写呢？

相同的写在一起啊  不同的分开谢啊......

wlue

好的，谢谢！明白了！
#div3::before,#div3::after{}
试验成功！

xuegaoxiansen

利用并集选择器

sk沧海一粟

[CSS] 纯文本查看 复制代码

#div3::before,#div3::after{
    content: '';
    width: 50px;
    border-radius: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    left: 25px;
}
#div::before{
    height: 50px;
    background-color: white;
    border: 15px solid black;
    margin: 50px auto;
}
#div3::after{
    background-color: black;
    border: 15px solid white;
    margin: 50px auto;
    top: -50px;
}