【第1348期】理解伪元素:before和:after
前言
基础篇。今日早读文章由@康斌翻译分享。
正文从这开始～
CSS的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上，CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是伪元素。
事实上，确实有一些CSS选择器被归类为伪元素，例如：:first-line，:first-letter，::selection，: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>但是，实际上文档中并没有生成这些元素。它们在表面上可见，但是你在文档的源代码中找不到它们，这就是它们为什么被称作“伪”元素。
使用伪元素
使用伪元素相对容易，语法selector:before会在内容之前添加一个元素，对应的，语法selector:after会在之后添加，我们可以通过content属性在它们里面添加内容。
例如，下面的代码会在blockquote元素的之前和之后各添加一个引号。
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;
}指定伪元素尺寸
生成的元素默认是内联元素，所以当我们想指定它们的宽度和高度的时候，我们首先得用display: block把它们声明为块级元素。
blockquote:before {
content: open-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: left;
position: relative;
top: 30px;
border-radius: 25px;
/** define it as a block element **/
display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: close-quote;
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
background: #ddd;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;
/** define it as a block element **/
display: block;
height: 25px;
width: 25px;
}关联背景图片
我们也可以把内容替换为图片，而不是只有纯文本。尽管content属性提供了url()来插入图片，但大多数情况下，我更倾向于使用background属性，从而更好的控制图片。
blockquote:before {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: left;
position: relative;
top: 30px;
border-radius: 25px;
background: url(images/quotationmark.png) -3px -3px #ddd;
display: block;
height: 25px;
width: 25px;
}
blockquote:after {
content: " ";
font-size: 24pt;
text-align: center;
line-height: 42px;
color: #fff;
float: right;
position: relative;
bottom: 40px;
border-radius: 25px;
background: url(images/quotationmark.png) -1px -32px #ddd;
display: block;
height: 25px;
width: 25px;
}然而，正如你在上面代码中看到的，我们仍然声明了content属性并且把它的值设置为空字符串。content属性是必须的，并且应该总是被引用；否则的话，伪元素无法正常工作。
结合伪类
尽管有不同类型的伪类和伪元素，我们可以在一个CSS规则中同时使用伪类和伪元素，例如，如果我们希望当鼠标移到blockquote元素上，引号的背景色能够略微变深。
blockquote:hover:after, blockquote:hover:before {
background-color: #555;
}添加过渡效果
我们甚至可以在伪元素上应用transition属性来创建优美的颜色过渡效果。
transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;更多灵感
为了激发你的灵感，我们选择了三个非常酷的例子，希望能为你的Web设计提供帮助。
迷人的阴影
在Paul Underwood 的教程中解释了如何使用伪元素:before和:after来创建更加逼真和吸引人的阴影特效。只需把这两个伪元素设置为绝对定位以及负的z-index，就可以把它们放置到图片后面实现阴影的效果。
3D按钮
这是一个非常机智的实现，利用伪元素和CSS3的box-shadow来绘制一个令人惊叹的3D按钮，仅仅使用了CSS和锚文本标签<a></a>。伪元素:before被用来在按钮的左侧添加数字1。
图片叠加效果
通过使用伪元素，使得仅仅用一个图片标签就能创建一个凌乱的图片叠加效果变为可能。通过给伪元素设置负的z-index，使得叠加的图片在真正的图片后面，让人产生图片叠加的错觉。
结论
伪元素就是这么酷并且十分好用，我们可以在不影响实际HTML结构的情况下使用这两个元素，几乎所有我们能想到的事情，它们都可以做到。
事实上，有一些伪元素的改进工作，目前正逐步进行，如伪元素嵌套div::before::before { content: ‘’; }和多重伪元素div::before(3) { content: ‘’; }，在未来的web设计中这些改进显然会为我们的设计提供更多的可能性。它们将会在最新的浏览器中得到支持，现在，请让我们耐心等待！
译者补充
在“指定伪元素尺寸”这节中，作者提到了要加上display: block;将伪元素变成块级元素才能设置宽高。实际上，由于作者已经设置了float: left/right;，而float会把元素设置为块级元素，所以无需设置display: block;。
总结就这句话：
CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。
关于本文
译者：@康斌
译文：
https://www.jianshu.com/p/cc14b72c870e
作者：@ Thoriq Firdaus
原文：
https://www.hongkiat.com/blog/pseudo-element-before-after/
最后，为你推荐