CSS3选择器 ::before和::after使用方法教程

CSS3选择器 ::before和::after使用方法教程


:before和:after伪元素的用法 :before和:after伪元素的用法十分简单；下面的代码样例中， :before 和 :after 将会在 blockquote 元素之前和之后插入新内容，它使用 content属性，也就是在内容上进行操作。 下面的代码中一个引号标记将出现在blockquote元素的之前和之后。

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

复制代码

:before和:after伪元素的CSS样式 :before和:after虽然是伪元素，但它们所有用法和行为表现和真正的元素几乎完全一样；我们可以对它们进行任何的CSS样式设置，例如，改变它们的前景颜色，增加背景色/图，调整字体大小，调整对齐方式等等。

1. blockquote:before {
2.         content: open-quote;
3.         font-size: 24pt;
4.         text-align: center;
5.         line-height: 42px;
6.         color: #fff;
7.         background: #ddd;
8.         float: left;
9.         position: relative;
10.         top: 30px;
12. }
13. blockquote:after {
14.         content: close-quote;
15.         font-size: 24pt;
16.         text-align: center;
17.         line-height: 42px;
18.         color: #fff;
19.         background: #ddd;
20.         float: right;
21.         position: relative;
22.         bottom: 40px;
23. }

复制代码


:before和:after伪元素宽度和高度设置 :before和:after伪元素在页面中生成的元素在缺省情况下是“内联(inline)”元素，如果我们想指定它们的高度和宽度，需要首先定义它们为一个block元素，使用display: block;。

1. blockquote:before {
2.         content: open-quote;
3.         font-size: 24pt;
4.         text-align: center;
5.         line-height: 42px;
6.         color: #fff;
7.         background: #ddd;
8.         float: left;
9.         position: relative;
10.         top: 30px;
11.         border-radius: 25px;
13.         /** 定义成 block 元素 **/
14.         display: block;
15.         height: 25px;
16.         width: 25px;
17. }
18. blockquote:after {
19.         content: close-quote;
20.         font-size: 24pt;
21.         text-align: center;
22.         line-height: 42px;
23.         color: #fff;
24.         background: #ddd;
25.         float: right;
26.         position: relative;
27.         bottom: 40px;
28.         border-radius: 25px;
30.         /** 定义成 block 元素 **/
31.         display: block;
32.         height: 25px;
33.         width: 25px;
34. }

复制代码



给:before和:after伪元素添加背景图/背景色 我们不仅可以设置content的文字内容，而且可以给它添加图片和背景图片。尽管content 属性直接支持url()语法来插入一个图片，但在大多数情况下，我们更常用的是使用background属性来控制图片的显示。

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

复制代码