CSS中:before和:after伪元素利用的奇技淫巧

CSS 有两个说不上经常利用的伪类 :before 和 :after，偶然会被人用来增添些自界说格局甚么的，可是它们的服从不只于此。头几天发明了 Creative Link Effects 这个很是成心思的先容创意链接殊效的页面，外面惊人的结果大批利用到的特征除 transform 属性停止变形以外，便是接上去要先容的这两个伪元素了。

一 根基语法
在领会进阶的利用之前，先来领会一下语律例则。泛泛仅仅须要将这两个伪元素用于增添一些自界说字符时，只要利用伪类利用的单冒号写法，以保障阅读器的兼容性：

1. p:before  {}  

不过，在 CSS3 中为了区分伪元素和伪类为伪元素利用了双冒号，因此若是利用了 display 或 width 等属性时使得显现离开了本来元素后，倡议按照规范双写。过于老的阅读器能够会存在撑持题目，不过伪元素大多是共同 CSS3 利用，就无所谓向下兼容了：

1. img::after {}  

这两个伪类下独有的属性 content ，用于在 CSS 衬着中向元素逻辑上的头部或尾部增添内容。注重这些增添不会转变文档内容，不会呈此刻 DOM 中，不可复制，仅仅是在 CSS 衬着层插手。比拟有效的因此下几个值：

[String] – 利用引号包含一段字符串，将会向元素内容中增添字符串。示例：

1. a:after { content: "↗"; }  

attr() – 挪用以后元素的属性，能够便利的比方将图片的 Alt 提醒笔墨或链接的 Href 地点显现出来。示例：

1. a:after { content:"(" attr(href) ")"; }  

url() / uri() – 用于援用媒体文件。示例：

1. h1::before { content: url(logo.png); }  

counter() –  挪用计数器，能够不利用列表元素完成序号功效。具体请参见 counter-increment 和 counter-reset 属性的用法。示例：

1. h2:before { countercounter-increment: chapter; content: "Chapter " counter(chapter) ". " }  

二 进阶手艺
断根浮动是一个经常会碰到的题目，不少人的处理方法是增添一个空的 div 利用 clear:both; 属性。此刻，无需增添没成心义的元素，仅须要以下款式便可在元素尾部主动断根浮动：

1. .clear-fix { *overflow: hidden; *zoom: 1; }   
2. .clear-fix:after { display: table; content: ""; width: 0; clear: both; }  

良多人喜好给 blockquote 援用段增添庞大的引号作为背景，这类时辰咱们就能够用 :before 来取代 background 了，即能够给背景留下空间，还能够间接利用笔墨而非图片：

1. blockquote::before {   
2.  content: open-quote;   
3.  position: absolute;   
4.  z-index: -1;   
5.  color: #DDD;   
6.  font-size: 120px;   
7.  font-family: serif;   
8.  font-weight: bolder;   
9. }  

三 殊效妙用
除简略的增添字符，共同 CSS 壮大的定位和殊效特征，完整能够到达给简略的元素别的附加最多两个容器的结果。有一点须要注重的是，若是不须要内容仅共同款式属性做出结果，内容属性也不能为空，即 content:”” 。不然，其余的款式属性一律不会失效。

鼠标移上链接，呈现方括号：

1. a {   
2.  position: relative;   
3.  display: inline-block;   
4.  outline: none;   
5.  text-decoration: none;   
6.  color: #000;   
7.  font-size: 32px;   
8.  padding: 5px 10px;   
9. }   
10.   
11. a:hover::before, a:hover::after { position: absolute; }   
12. a:hover::before { content: "5B"; left: -20px; }   
13. a:hover::after { content: "5D"; rightright:  -20px; }  

一样，咱们只须要共同 display: block 和 position: absolute ，就能够将其当做两个容器，拼分解悬浮呈现双边框的殊效：

1. a {   
2.  position: relative;   
3.  display: inline-block;   
4.  outline: none;   
5.  text-decoration: none;   
6.  color: #000;   
7.  font-size: 32px;   
8.  padding: 0 10px;   
9. }   
10.   
11. /* 大框 */  
12. a:hover::before, a:hover::after {    
13.  content: "";   
14.  display: block;   
15.  position: absolute;   
16.  top: -15%%;   
17.  left: -14%%;   
18.  width: 120%;   
19.  height: 120%;   
20.  border-style: solid;   
21.  border-width: 4px;   
22.  border-color: #DDD;   
23.  }   
24.   
25. /* 小框 */  
26.  a:hover::after {   
27.   top: 0%;   
28.   left: 0%;   
29.  width: 100%;   
30.  height: 100%;   
31.  border-width: 2px;   
32.  }