我们之前看过：active，它是一个非常方便的伪类选择器，可用于创建一些很棒的鼠标按下效果。今天，我们将退后一步，探索其他“伪”项目，这一次，我们将研究伪元素：before和：after。
您可能已经开始在高级CSS示例中看到它们在整个Web上的使用情况，因此您不妨直接学习并亲自使用它们。
什么是伪元素，它与伪类有什么区别？为什么伪元素有时只有一个冒号，有时又有两个冒号？
如何在CSS中实现：before和：after？网络上的开发人员使用这些工具执行现代编码的惊人壮举有哪些方式？
请仔细阅读，找出答案。
伪类与伪元素
这是一个非常令人困惑的小语义，很多人似乎对此感到困惑（在研究之前包括了我自己）。如果您运行Google快速搜索来找到两者之间的区别，则会发现漫长而又过于技术性的回应，加上简单，不知情的陈述，两者实际上是不同的，而没有关于如何或为什么的讨论。
某些资源，例如W3Schools，似乎可以互换使用这些术语，这通常会导致使用不正确。如果将其分解，答案很简单。
伪类：以整个元素为目标
首先，让我们看一下针对完整元素或元素状态的伪类。
|
1
2
3
4
|
a:link {color: #111}
a:hover {color: #222}
div:first–child {color: #333}
div:nth–child(3) {color: #444}
|
如您所见，尽管这些条件不一定基于DOM，但在每种情况下，最终的选择都是一个完整的元素。最终样式化的是整个链接元素，段落，div等。
伪元素：目标元素子部分
另一方面，伪元素选择元素的子部分。这是一个重要的区别，下面是一些示例：
|
1
2
3
|
p::first–line {color: #555}
p::first–letter {color: #666}
a::before {content : “hello world”;}
|
如您所见，所有这些仅针对元素的一部分：例如段落的第一行或字母。它们还具有惊人的功能，甚至可以定位甚至添加到您的HTML中甚至没有指定的内容，这正是今天讨论的主题：before和：after为我们所做的。
要阅读有关伪类和伪选择器之间差异的更多信息，我强烈建议您查看UMD，以获取大量示例的详尽而详尽的解释。
：before vs.::before
在我们进入CSS中的：before和：after实际操作以及如何使用它们完成一些有趣的工作之前，让我们澄清另一个主要的混淆点。如果在网上查找使用：before和：after的示例，则会发现两种不同的语法。
有时，开发人员将使用一个冒号，而其他时候将使用两个。两者执行不同的功能吗？完全没有，结果从功能的角度来看它们是完全相同的，这意味着两者将达到相同的结果并且用于相同的目的。那么为什么会有所不同呢？这是一个例子：
|
1
2
3
4
5
6
7
8
9
|
/*CSS2*/
.example:before {}
.example:after {}
.example:first–child {}
/*CSS3*/
.example::before {}
.example::after {}
.example:first–child {}
|
如您所见，在CSS2中，我们使用单个冒号来表示伪类和伪元素。但是，为了帮助区分两者，CSS3仅在伪元素上包含第二个冒号。
IE浏览器再次破坏了一切
那么，为什么我们仍然在现代示例和教程中同时看到这两种语法？有些开发人员只是不知道更改吗？可能是这种情况，但是对于大多数此类不一致的可能答案在于我们的老朋友Internet Explorer，它破坏了Web开发领域中所有美好的新事物。
事实证明，所有现代浏览器都接受双冒号语法，但令人遗憾的是IE8并不接受。因此，在使用:: before和:: after进行编码时，大多数开发人员都选择了优于约定的兼容性，并且仅使用CSS2单冒号语法。为了使事情简单和一致，在本讨论的其余部分中，我们将使用这种更广泛兼容的语法。
什么是：before和：after？
这是很多基础工作，但是有必要知道何时要在CSS中使用：before和：after进行讨论。现在，我们终于可以进入并看看这些事情是如何工作的。
这里的概念实际上非常简单。：before和：after都允许您从CSS中实际添加HTML元素，而不会使您的表示标记混乱。这为添加一些不一定值得额外标记的装饰元素提供了很多可能性。
例如，假设您在整个站点中有几个电话号码，并想在其前面放置☎图标。您可以使用：before伪元素来做到这一点：
|
1
2
3
4
|
.phoneNumber:before {
content:“☎”;
font–size: 15px;
}
|
该代码实际上将在每个用.phoneNumber类标记的元素之前插入小图标。：after代码仅以完全相同的方式工作，如您所料，它将图标放置在电话号码之后。
|
1
2
3
4
|
.phoneNumber:after {
content:“☎”;
font–size: 15px;
}
|
一个简单的例子
：before和：after最近变得如此受欢迎的原因之一是因为它们能够显着增加纯CSS设计元素的复杂性。在没有任何其他标记的情况下，我们可以使用这些伪元素来添加其他可样式化的元素和图层。
要查看其工作原理，让我们设计一个简单的按钮。这些是将.button类设置为带有红色渐变的圆形的基本样式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
.button {
height: 100px;
width: 100px;
position: relative;
margin: 50px;
color: white;
text–align: center;
line–height: 100px;
/*Rounded Corners and Shadows*/
–webkit–border–radius: 100px;
–moz–border–radius: 100px;
border–radius: 100px;
–webkit–box–shadow: 2px 2px 4px rgba(0,0,0,0.4);
–moz–box–shadow: 2px 2px 4px rgba(0,0,0,0.4);
box–shadow: 2px 2px 4px rgba(0,0,0,0.4);
/*Ridiculous Gradient Syntax*/
background: #e51d16; /* Old browsers */
background: –moz–linear–gradient(top, #e51d16 0%, #b21203 100%); /* FF3.6+ */
background: –webkit–gradient(linear, left top, left bottom, color–stop(0%,#e51d16), color-stop(100%,#b21203)); /* Chrome,Safari4+ */
background: –webkit–linear–gradient(top, #e51d16 0%,#b21203 100%); /* Chrome10+,Safari5.1+ */
background: –o–linear–gradient(top, #e51d16 0%,#b21203 100%); /* Opera 11.10+ */
background: –ms–linear–gradient(top, #e51d16 0%,#b21203 100%); /* IE10+ */
background: linear–gradient(top, #e51d16 0%,#b21203 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=‘#e51d16’, endColorstr=‘#b21203’,GradientType=0 ); /* IE6-9 */
}
|
令人惊讶的是，所有这些工作将导致一个相当普通的圆圈按钮：
现在，假设我们要在按钮外部添加一个稍暗的区域，并为其提供一个内部阴影，以使整个外观看起来有些内插图。无需添加额外的标记，我们可以简单地使用一个空的伪元素。
|
1
2
3
|
.button:before {
content:“”;
}
|
现在我们可以设置样式以添加所需的效果。这是您如今在网络上看到的许多花哨且难以理解的CSS样式教程的基础。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
.button:before {
content:“”;
width: 100%;
height: 100%;
display: block;
z–index: –1;
position: relative;
padding: 15px;
background: #ddd;
left: –15px;
top: –15px;
–webkit–border–radius: 100px;
–moz–border–radius: 100px;
border–radius: 100px;
–webkit–box–shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
–moz–box–shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
box–shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}
|
现在，我们的按钮具有更多的维度。：before伪元素在外圈中很明显。我们给它的z-index -1使其放到按钮后面，并使用绝对定位将其微调到适当位置。
现在让我们说我们想再做一次相同的事情。这样就可以访问：after伪元素并重复该过程。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
.button:after {
content:“”;
width: 100%;
height: 100%;
display: block;
z–index: –2;
position: relative;
padding: 25px;
background: #eee;
position: absolute;
left: –25px;
top: –25px;
–webkit–border–radius: 100px;
–moz–border–radius: 100px;
border–radius: 100px;
–webkit–box–shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
–moz–box–shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
box–shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}
|
这只是增加了另一层。现在，我们的按钮似乎在顶部画布上有一个双插图：
：before和：after之后还能做什么？
到目前为止，您应该对：before和：after以及它们如何在现代Web设计中使用有相当的了解。事实证明，尽管兔子洞还更深，但这些伪元素已被用于各种疯狂的东西。这是您应该了解的一些流行用法：
微型Clearfix
谁不喜欢一个好的clearfix？CSS浮动可能是一个真正的痛苦（它们违反了第五条诫命，并且对父元素不利），并且各地的开发人员都在不断寻找清除它们的更好方法。
Nicolas Gallagher提出了当前最受欢迎的clearfix hack，它以创造性的方式利用了：before和：after。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/* For modern browsers */
.cf:before,
.cf:after {
content:“”;
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
|
在此：before伪元素可防止上边距崩溃，而：after伪元素用于清除浮点数。这是一个非常漂亮的解决方案，它比其他值得注意的跨浏览器友好尝试使用的代码少得多。
在您开始发表评论之前，我都知道并使用了overflow：hidden方法。这只是一个替代方法，当溢出技巧不合适时特别有用。
CSS形状
：before和：after的另一个非常有趣的用法是使用纯CSS而不是图像来创建复杂的形状。这是通过对边界的一些真正巧妙的操纵以及一些伪元素魔术来实现的。
CSS3Shapes.com提供了一些很棒的基本形状示例，您可以使用此方法构建它们。例如，这是一个八边形的代码。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
#octagon {
width: 100px;
height: 100px;
background: blue;
}
#octagon:before {
height: 0;
width: 40px;
content:“”;
position: absolute;
border–bottom: 30px solid blue;
border–left: 30px solid white;
border–right: 30px solid white;
}
#octagon:after {
height: 0;
width: 40px;
content:“”;
position: absolute;
border–top: 30px solid blue;
border–left: 30px solid white;
border–right: 30px solid white;
margin: 70px 0 0 0;
}
|
如您所见，调用：before和：after，然后定位并指定边界。这将各种简单的形状组合成复杂的形状。很漂亮！
甚至更多的伪元素善良
如果您正在寻找与伪元素有关的更疯狂的东西，则Chris Coyier在其网站CSS-Tricks上汇总了各种可能的应用程序。
结论
到目前为止，您应该几乎是CSS中的：before和：after的专家。您应该知道伪类和伪元素之间的区别，以及为什么伪伪元素经常出现在双冒号或单个冒号中。您还应该知道：before和：after的基本用法，并且对如何使用它们创建一些令人印象深刻的CSS伏都教书有个好主意。
首页
点击拨打 18150366706(微信同号)