伪类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。
相关推荐
伪元素实现tooltip,nav导航栏的炫酷效果以及计数器
纯css3before和after伪元素结合animation鼠标悬停动画效果
前两天看文档看到选择器那块儿的时候,前面4个基本都能理解:.class,#id,element,element, element,但后面两个::after和::before(文档中说,分别表示在view 组件的后面和前面插入内容),表示有点没有理解。...
1. 伪元素与伪类的区别 3. 实例分析1 4. 实例分析2 6. 更多例子
一直感觉这两个伪类对象不是很重要,并且IE对它两兄弟并不支持,所以也没有怎么静下心来研究,只有在清楚浮动clearfix的时候会用到哈,其他都很 少用!不过最近在研究css3的时候觉得它两个的搭配不仅能够减少代码量...
before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪类应用相当的普及以及兴盛,不过貌似...
而且CSS里不光有伪类,还有伪元素,比如::first-letter,:first-line,:before和:after。 本文中其它伪元素暂且不表,单说:after伪元素。 after顾名思义是在元素后面的意思,实质是在元素之后添加内容。 这个伪元素...
并且没有使用任何图片之类的东东,主要依靠CSS3代码中的::before ::after两个伪类 以前我还是比较忽视这两个家伙的,今天第一次见到原来伪类的好处这么多,以后会多多推荐CSS3伪类实现的效果 使用方法: 1...
在css选择器中有这样子的写法div:before、div:after,对于before、after来说有部分人是相当陌生的,那么这两个标签是什么呢?有什么用处? :befor、:after是CSS的伪元素,什么是伪元素呢?伪元素用于向某些选择器...
最近遇到一个需要改变:before,:after 伪类的样式,发现css中并不能直接选择某一个元素的:before和:after伪类元素,所以特总结了使用javascript和jQuery改变元素的:before和:after伪类样式的方法。 类如如下的html及...
利用CSS伪元素 :before 和 :after 可以在文档前后插入内容而不改变文档原有结构,再配合 box-shadow 可以实现很炫的效果, 下面就展示三个例子: 1、利用 :before 和 :after 添加背景,比如给一段文字前后打引号...
主要介绍了使用before和:after伪类制作css3圆形按钮,需要的朋友可以参考下
本教程简单的介绍一下关于CSS伪类:before, :after详解,有需要了解的朋友可以参考一下下。 :before 伪元素在元素之前添加内容 这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地,这个伪元素是行内元素...
主要介绍了CSS中的before和:after伪元素使用详解,包括对一些非文本内容的插入操作使用,需要的朋友可以参考下
CSS伪元素(Pseudo Element):after与:before 估计大家很少用到这些 ,但是在技术飞速发展的现在,我觉得我们不能整天把时间浪费在兼容IE6上! 先看一下:after与:before甚模样: HTML中只有一个P标签,P里面有一行文字...
:before和:after伪元素在CSS中除了被用来添加元素、加小标、清浮动等,还有很多妙用之处,接下来我们就来看一两个CSS中:before和:after伪元素使用的奇技淫巧