CSS伪元素 CSS:before CSS伪元素(Pseudo Element):after与:before
发布时间：2011-12-04 00:07:29 作者：佚名 
我要评论
我要评论before 伪元素在元素之前添加内容
:before 伪元素在元素之前添加内容.
此样式会在每个 h2元素之前播放一段声音：
h2:before
{
content:url(beep.mp3);
}
如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）才支持 content 属性。
CSS伪元素(Pseudo Element):after与:before
估计大家很少用到这些 ，但是在技术飞速发展的现在，我觉得我们不能整天把时间浪费在兼容IE6上！
先看一下:after与:before甚模样：
HTML中只有一个P标签,P里面有一行文字:
<p>
一行测试文字
</p>
CSS中的设置：
p:before,p:after{
content:"$$";
}
效果如图所示：
p:before,p:after{
content:url(Gravatar.jpg);
}
此样式会在每个 h2元素之前播放一段声音：
复制代码
代码如下:h2:before
{
content:url(beep.mp3);
}
如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）才支持 content 属性。
CSS伪元素(Pseudo Element):after与:before
估计大家很少用到这些 ，但是在技术飞速发展的现在，我觉得我们不能整天把时间浪费在兼容IE6上！
先看一下:after与:before甚模样：
HTML中只有一个P标签,P里面有一行文字:
<p>
一行测试文字
</p>
CSS中的设置：
复制代码
代码如下:p:before,p:after{
content:"$$";
}
效果如图所示：
除了文字可以跟内容发生关系外，图片也可以哦：
复制代码
代码如下:p:before,p:after{
content:url(Gravatar.jpg);
}
怎么样，到了这里，你是不是有什么想说的或者想做的呢？可不可以用这个方法来试试以前的float定位排版的方法呢？或者用它来做一些更高级的东西呢？
例如，我现在想在网页中实现如下图所示的排版，就可以用这种方法。
我们可以content的很多属性，如display、position、background……，您是否想到了呢？
另外，利用:after、:before还可以实现多背景变幻的效果哦，动手做做吧，我想这应该会让你兴奋一会儿的，哈哈！
相关文章
- before 和 after其实就是附着在元素前后的伪元素，说他是伪元素的意思就是，元素不是在DOM中生成的，而是在浏览器渲染引擎渲染CSS的时候画上去的，这篇文章主要给大家介绍2017-09-18
那些你所不知的CSS ::before 和::after 伪元素用法
下面小编就为大家带来一篇那些你所不知的CSS ::before 和::after 伪元素用法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-12- :before和:after伪元素在CSS中除了被用来添加元素、加小标、清浮动等,还有很多妙用之处,接下来我们就来看一两个CSS中:before和:after伪元素使用的奇技淫巧2016-05-20
- 这篇文章主要介绍了CSS中的before和:after伪元素使用详解,包括对一些非文本内容的插入操作使用,需要的朋友可以参考下2015-05-27
CSS伪元素 :before, :after, box-shadow应用
利用CSS伪元素 ：before 和 ：after 可以在文档前后插入内容而不改变文档原有结构，下面有个不错的示例，大家可以参考下2014-03-04CSS伪元素before、after设置特殊效果:制作时尚焦点图相框
在css选择器中有这样子的写法div:before、div:after，对于before、after来说有部分人是相当陌生的,那么这两个标签是什么呢？有什么用处？本文将详细介绍，需要的朋友可以参2012-12-12
本篇重点介绍CSS中的:befor、:after创建的伪元素几种使用场景，如填充文本、作为iconfont、进度线、时间线以及几何图形，感兴趣的朋友一起看看吧2018-02-07
最新评论