基本应用:
伪元素多用于修饰。如实现以下列表
Java / JavaScript / PHP / C++
<ul>
<li>Java</li>
<li>JavaScript</li>
<li>PHP</li>
<li>C++</li>
</ul>
li{
display: inline-block;
}
/*除去最后一个*/
li:not(:last-child)::after{
content: "/"
}
这样就不必为了一个 “/” 多加一个li。
::before && ::after 实现画画X号
<div class="close"></div>
.close{
position: reletive;
width: 50px;
height: 50px;
}
.close::before{
position: absolute;
content: '';
width: 2px;
height: 30px;
background-color: black;
transform: rotate(45deg);
}
.close::after{
position: absolute;
content: ' ';
width: 2px;
height:30px;
background-color: black;
transform: rotate(-45deg);
}
由于伪元素默认为inline,设置不了宽高,两种解决:
- 给close类设置定位,给两个伪元素设置绝对定位,脱离了文本流就可以设置宽高了。
- 设置inline-block即可。