主要说:before,:after元素这俩个伪类元素怎么用,它们和::before,::after没多少区别,后者是css3里新增的。建立一个假的元素盒子,而后添加样式或者内容。而这个盒子就是里面的content样式。使用这个元素里面必须有content样式。看一下它的使用场景:css
一、添加图片或文字css3
<p id="text">测试</p> #text::before{content:"";width:100px;height:100px;background:url("xxx.jpg") no-repert center;}这样就在测试前加了一个图片,content用来作盒子可是这个盒子是虚的,因此叫作伪类。
二、清除浮动 测试
#text::after{ content:""; display:block; height:0px; overflow:hidden; clear:both;}
三、插入文本url
#text::after{content:"结尾";color:"#ccc";}输出测试结尾。 #text::before{content:"开始";color:"#666"}输出开始测试
四、插入项目编号blog
<ul> <li>标题一</li> <li>标题二</li> </ul> ul li::before{content:(number)"、";}这里就像是字符串拼接,里面的number能够设置不一样的样式值,具体百度吧。
嗯嗯,以上。图片