html中after伪类原理 css伪类before跟after原理与使用（原）

伪类before和after用于在被选元素的内容前面或后面插入内容。

请使用 content 属性来指定要插入的内容。(只能插入内容)

可以设置所插入内容的样式。

直接上代码：

div {width:200px; border:1px solid #000; line-height:50px; margin:10px;}

.after,.before {border:1px solid #330;}

.before:before {content:'超帅的'; color:#F00;}

.after:after {content:'的教程'; color:#F00;}

窗外赏雪窗外赏雪

before伪类会在被选的span元素的内容前面插入:before内容

after伪类会在被选的span元素的内容后面插入:after内容

该伪类主要用于清除浮动，现在来看看例子

.frame{background-color:#3FF; width:300px;}

.left{background-color:red; width:100px; height:200px; float:left}

.right{background-color:green; width:100px; height:150px; float:right}

.bottom{background-color:gray; width:300px; height:50px;}

这样做比较麻烦，需要在浮动div后面新增一个div来清除浮动，我们可以通过after伪类来实现。

.frame{background-color:#3FF; width:300px;}

.left{background-color:red; width:100px; height:200px; float:left}

.right{background-color:green; width:100px; height:150px; float:right}

.bottom{background-color:gray; width:300px; height:50px;}

.clearfix {display: block;}

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}

注意：

必须在浮动的div后面添加clean的div，不能在浮动的div里面添加。

因此，不能通过