理解伪元素 :before 和 :after

时间  2019-11-05
标签 理解 元素 繁體版
原文   原文链接

层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性容许咱们添加额外元素而不扰乱文档自己，这就是“伪元素”。css

post-cover

你必定据说过这个词，尤为是当你一直关注着咱们的教程。点此浏览原做者的其余文章css3

事实上，的确有一些CSS家族的成员（CSS选择器）被分类为伪元素好比：:first-line, :first-letter, ::selection, :before and :after。可是，就本文而言，咱们将把咱们探讨的范围限制在:before 和 :after这两个元素上。所以，本文中的“伪元素”将特指这两个伪元素（:before 和 :after），咱们将从基础入手，来研究这个独特的主题。web

关于语法和浏览器支持

伪元素实际上在CSS1中就存在了，可是咱们如今所讨论的:before和:after则发布于CSS2.1中。在最初，伪元素的语法是使用“:”（一个冒号），随着web的发展，在CSS3中修订后的伪元素使用“::”（两个冒号），也就是::before 和 ::after—以区分伪元素和伪类（好比:hover，:active等）浏览器

syntax1

然而，不管你使用单冒号仍是双冒号，浏览器都将能识别它们。因为IE8只支持单冒号的格式，安全起见若是你想要更普遍的浏览器兼容性那么仍是使用单冒号的格式吧！安全

它是作什么的

简而言之，伪元素将会在内容元素的先后插入额外的元素，所以当咱们添加它们时，使用如下的标记方式，他们在技术上是平等的。post

1
2
3
4
5
<p>
<span>:before</span>
  This the main content.
<span>:after</span>
</p>

可是这些元素实际上并不在文档中生成。它们将在外部可见，可是你将不会在文档的源代码中找到它们，所以，实际上它们是“虚假”的元素。字体

使用伪元素

使用伪元素是相对容易的，:before将会在内容以前“添加”一个元素而:after将会在内容后“添加”一个元素。在它们之中添加内容咱们可使用content属性。url

举例来讲，下面的代码片断将在引用的以前和以后分别添加添加一个引号。spa

quotationmark 1(1)

 

1
2
3
4
5
6
blockquote:before {
  content : open-quote ;
}
blockquote:after {
  content : close-quote ;
}

伪元素样式

尽管做为“虚假”的元素，事实上伪元素表现上就像是“真正”的元素，咱们可以给它们添加任何样式，好比改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等。.net

styles4

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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把它们声明为块级元素。 因为已经设置float，因此无需设置display:black。

dimension5

 

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
28
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 ;
  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 ;
  height : 25px ;
  width : 25px ;
}

关联背景图像

咱们也能够替换用图片替换内容而不是只有纯文本。尽管content属性提供了 url()来插入图片, 可是在更多的实例中，我更倾向于使用背景（background）属性从而更好的控制图片。

image-background6

 

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
28
29
30
31
32
33
34
35
</ pre >
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属性是必须的并且应该常常被应用。不然，伪元素不管如何都没法正常工做。

结合伪类

尽管有不一样类型的伪X（伪元素、伪类），咱们可使用伪类连同伪元素一块儿放入一个CSS规则中，例如，若是咱们但愿当咱们的鼠标移到blockqoute上时，引号的背景色可以略微变深。

hover7

 

1
2
3
blockquote:hover:after, blockquote:hover:before {
  background-color : #555 ;
}

添加过渡效果

咱们甚至能够在伪元素上应用transition属性来建立优美的颜色过渡效果。

1
2
3
4
transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;

更多的灵感

为了激发你的灵感，咱们已经选择了三个很酷的例子，能够在web设计上给你不少主意。

迷人的阴影

在这个教程中 Paul Underwood 解释了如何建立更加逼真和吸引人的阴影效果。

使用 伪元素:before 和 :after 。它们两个都是绝对定位，并且使用负z-index来放置到图片后方实现阴影效果。

fascinating-shadows8

3D按钮

这是一个很是聪明的实现，利用伪元素结合CSS3 box-shadow 来绘制一个使人吃惊的3D按钮，仅仅使用了CSS和单一的锚文本。伪元素:before 被用来在按钮的左侧添加数字“1”。

3d-button9

叠加图像效果

使用伪元素来仅仅依靠一个图片标签建立一个“凌乱的”叠加图像效果也是可能的。伪元素用于创建一个图片叠加的错觉，经过使用z-index负值使“叠加”的图片在真正的图片后面来实现。

stacked-image10

结论

伪元素很酷同时也是可应用到实际工做中的，基本上，每个咱们所添加的元素都不会干扰现有的HTML结构，并且伪元素能够作到 几乎全部咱们能想到的事情。

实际上有一些伪元素的改进工做,目前逐步进行，好比伪元素嵌套div::before::before { content: ”; }以及多重伪元素div::before(3) { content: ”; }。很显然，在将来的web设计中，这些改进会让咱们的设计有更多的形式（更多的可能性）。然而，他们将会在最新的浏览器中获得支持，让咱们如今耐心的等待吧！

相关文章