伪元素的妙用（闲着也是闲着）

最新推荐文章于 2023-10-14 20:47:32 发布

沈江平

最新推荐文章于 2023-10-14 20:47:32 发布

阅读量824

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_36094484/article/details/74554649

本文介绍了CSS伪元素的概念及应用，重点讲解了如何利用伪元素：after进行清除浮动的操作，并探讨了伪元素在实现列表项自定义样式方面的用途。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

伪元素其实就是用css基于某个DOM节点创造一个文档中本来没有的元素，它和其他基本元素一样可以有内容和样式并影响到布局，但因为并不真实存在于DOM中，故加了个伪字。记得第一次接触伪元素是学习清除浮动的时候。
清除浮动影响最基本的方式是对浮动元素之后的第一个元素加样式：clear：both/left/right；或者看情况在父元素设置overflow：hidden；或者粗暴地在后面加个空元素清除浮动。
后来发现原来前辈们最普遍的做法是将这句样式放在伪元素：after中
XX：after{
content：“.”;
display：block；
height：0px;
clear:both;}
除此之外，伪元素可以成为某些hack的策略，比如之前在stackoverflow看到有人问可以可以单纯用css来实现列表中list-style-disc等的换色。一般我们都是用小图标的，但是有人给出的解决方案是：
ul{list-style:none;padding:0;margin:0;}
ul li{
padding-left:1em;text-indent:-.7em;
}
ul li:before{content:'.'.color:red;}