html中after伪类原理,CSS伪类元素 ：after ：before

CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。

在最初，伪元素的语法是使用“:”(一个冒号)，随着web的发展，在CSS3中修订后的伪元素使用“::”(两个冒号)，也就是::before 和 ::after—以区分伪元素和伪类(比如:hover，:active等),

然而，无论你使用单冒号还是双冒号，浏览器都将能识别它们。由于IE8只支持单冒号的格式，安全起见如果你想要更广泛的浏览器兼容性那么还是使用单冒号的格式吧！

使用：

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

1

2

3

4

5

6

7

8

9

10

11

12

blockqupte之间的所有文本都会从常规文本中分离出来，经常会在左、

右两边进行缩进(增加外边距)，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。

blockquote:before{

content:"你好";

}

结果在前面插入你好。–但无法用鼠标选择你好，  这些元素实际上并不在文档中生成。它们将在外部可见，但是你将不会在文档的源代码中找到它们，因此，实际上它们是“虚假”的元素。

伪元素样式

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

blockquote:before{

content:open-quote;--------->前引号

font-size:30px;

text-align:center;

color:crimson;

line-height:60px;

background-color:blanchedalmond;

position:relative;

top:2px;

float:left;

}

指定伪元素尺寸

默认生成的元素是一个 内联元素，于是当我们想要指定它们的高度和宽度时，我们可以设display: block把它们声明为块级元素，或display: inline-block;( 可以设置宽高的内联元素) 由于已经设置float，所以无需设置display:black

1

2

3

4

5

6

7

8

9

10

11

12

13

14

blockquote:before{

content:open-quote;

font-size:30px;

text-align:center;

line-height:42px;

color:crimson;

display:inline-block;

background-color:bisque;

position:relative;

top:10px;

border-radius:25px;

height:25px;

width:25px;

}

也可以引入图片：

1

2

3

4

5

6

7

blockquote:before{

content:"";

display:inline-block;

height:30px;

width:30px;

background-image:url(img/2016-11-28_161639.png);

}

我们仍旧声明了content属性，而且此时使用了空字符串。content属性是必须的而且应该经常被应用。否则，伪元素无论如何都无法正常工作。

结合伪类–鼠标上浮变色

我们可以使用伪类连同伪元素一起放入一个CSS规则中，例如，如果我们希望当我们的鼠标移到blockqoute上时，引号的背景色能够略微变深

1

blockquote:hover:before{background-color:coral;}

添加过度效果

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

blockquote:before{

content:open-quote;

font-size:30px;

text-align:center;

line-height:42px;

color:crimson;

display:inline-block;

background-color:bisque;

position:relative;

top:10px;

border-radius:25px;

height:25px;

width:25px;

transition:all350ms;

-o-transition:all350ms;

-moz-transition:all350ms;

-webkit-transition:all350ms;

}