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;}

 

<div><span class="before">窗外赏雪</span></div>

<div><span class="after">窗外赏雪</span></div>

 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 class="frame">

<div id="content">

<div class="left"></div>

<div class="right"></div>

</div>

<div style="clear:both" ></div>

<div class="bottom"></div>

</div>

这样做比较麻烦，需要在浮动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 class="frame">

<div class="clearfix">

<div class="left"></div>

<div class="right"></div>

</div>

<div class="bottom"></div>

</div>

 

注意：

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

因此，不能通过<div class="right cleanfix"></div>清除浮动，因为这样相当于在浮动的div里面添加clean的div。