伪元素其实就是用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;}
清除浮动影响最基本的方式是对浮动元素之后的第一个元素加样式: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;}