理解 CSS 中的伪元素 :before 和 :after
你一定听说过这个词,尤其是当你一直关注着我们的教程。点此浏览原作者的其他文章
事实上,的确有一些CSS家族的成员(CSS选择器)被分类为伪元素比如::first-line, :first-letter, ::selection, :before and :after。但是,就本文而言,我们将把我们探讨的范围限制在:before 和 :after这两个元素上。因此,本文中的“伪元素”将特指这两个伪元素(:before 和 :after),我们将从基础入手,来研究这个独特的主题。
关于语法和浏览器支持
伪元素实际上在CSS1中就存在了,但是我们现在所讨论的:before和:after则发布于CSS2.1中。在最初,伪元素的语法是使用“:”(一个冒号),随着web的发展,在CSS3中修订后的伪元素使用“::”(两个冒号),也就是::before 和 ::after—以区分伪元素和伪类(比如:hover,:active等)
然而,无论你使用单冒号还是双冒号,浏览器都将能识别它们。由于IE8只支持单冒号的格式,安全起见如果你想要更广泛的浏览器兼容性那么还是使用单冒号的格式吧!
它是做什么的
简而言之,伪元素将会在内容元素的前后插入额外的元素,因此当我们添加它们时,使用以下的标记方式,他们在技术上是平等的。
<p>
<span>:before</span>
This the main content.
<span>:after</span>
</p>
但是这些元素实际上并不在文档中生成。它们将在外部可见,但是你将不会在文档的源代码中找到它们,因此,实际上它们是“虚假”的元素。
使用伪元素
使用伪元素是相对容易的,:before将会在内容之前“添加”一个元素而:after将会在内容后“添加”一个元素。在它们之中添加内容我们可以使用content属性。
举例来说,下面的代码片段将在引用的之前和之后分别添加添加一个引号。
blockquote:before {
content: open-quote;
}
blockquote:after {
content: close-quote;
}
伪元素样式
尽管作为“虚假”的元素,事实上伪元素表现上就像是“真正”的元素,我们能够给它们添加任何样式,比如改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等。
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottom: 40px;
}
【理解 CSS 中的伪元素 :before 和 :after】相关文章
1. 理解 CSS 中的伪元素 :before 和 :after
4. Firefox 附加组件:HTML5 Video Everywhere!
5. Firefox实现HTML5音视频播放GStreamer后端支持
6. 让网站变灰的css代码(支持IE、Firefox和Chrome)
7. Telefónica与Mozilla开拓基于HTML5互联网设备
9. Xcode 6.3 发布,支持 Force Touch 和 Swift 1.2
10. -prefix-free:帮你从 CSS 前缀的地狱中解脱出来
本文来源:https://www.51html5.com/a997.html
﹝理解 CSS 中的伪元素 :before 和 :after﹞相关内容
- Firefox最新版发布,大幅度降低内存使用
- Mozilla Firefox 8.0 Beta 3 发布
- 抢先下载:Firefox 8 Beta 3
- Mozilla Firefox 11.0 Alpha 1 发布
- Firefox Nightly版支持HTML5全屏API
- Firefox与主要收入来源Google合同到期
- Firefox 9.0正式版 大大提升JS性能
- HTML5控制接口重设 Firefox 11发新版
- Flash遭重击 Firefox或将默认不启用
- Firefox展示HTML5手机操作系统