css3的伪类before和after

最新推荐文章于 2024-07-11 21:11:19 发布

chuaiyiyuan4337

最新推荐文章于 2024-07-11 21:11:19 发布

阅读量84

点赞数

原文链接：https://my.oschina.net/u/2373383/blog/425804

版权

支持的浏览器

Chrome 2+

Firefox 3.5+ (FF3.0支持部分),

Safari 1.3+

Opera 9.2+

IE8+

手机上的浏览器

先上代码

<a href="http://***.com" id="v">vnexus</a>
<style>
#v:before{
    content: "";
    padding: 10px 15px;
    margin: 10px 15px;
    background: url("favicon.png") no-repeat ;
}


#v:after{
    content: attr();
    padding: 20px;
    margin: 20px;
}
</style>

我们使用:before生成当前元素前面的伪元素样式和内容，这里我们需要使用content属性，注意我们可以使用文字类，或者图片，

我们使用content生成伪对象内容，使用的是一个图片作为元素内容，如果你不使用content对象，伪类基本没有任何使用价值。

同时我们可以使用attr来引用元素的属性，例如这里我们可以读取id=gbin1的元素的href属性对应的值做为:after生成的伪元素内容。

如果你见到::before和::after的样式，也不用奇怪，唯一区别在于这是CSS3的伪类表示方法。

注意：上面代码中，我们在:before中生成一个图片内容： url("images/gbin1icon.png"); ，注意没有引号，否则内容将不是图片，而是"url("image..")"字符串儿。

缺省情况下，伪类元素display缺省属性是inline，你可以通过设置display: block来修改显示方式。以下代码将生成一个区域的伪类元素：

注意：不能删除content属性，否则这个伪类生成的元素将不存在

原文http://www.cnblogs.com/gbin1/archive/2012/04/27/2474096.html

转载于:https://my.oschina.net/u/2373383/blog/425804