那些你所不知道的CSS ::before 和::after 伪元素用法

CSS 有两个说不上常见的伪类 :before 和 :after，有时候会被人用来加上些自定文件格式甚么的，可是它们的功能不但于此。前几日发现了 Creative Link Effects 这个十分成心思的详细介绍艺术创意连接殊效的网页页面，里边惊人的实际效果很多应用到的特点除 transform 特性开展形变以外，便是接下来要详细介绍的这两个伪元素了。

Creative Button Styles

 1 基础英语的语法

在掌握进阶的运用以前，先来掌握1下英语的语法标准。平时仅仅必须将这两个伪元素用于加上1些自定标识符时，只需应用伪类应用的单冒号写法，以确保访问器的适配性：

但是，在 CSS3 中以便差别伪元素和伪类为伪元素应用了双冒号，因而假如应用了 display 或 width 等特性时使得显示信息摆脱了本来元素后，提议依照规范双写。过度老的访问器将会会存在适用难题，但是伪元素大多数是相互配合 CSS3 应用，就没有谓向下适配了：

这两个伪类下独有的特性 content ，用于在 CSS 3D渲染中向元素逻辑性上的头顶部或尾部加上內容。留意这些加上不容易更改文本文档內容，不容易出現在 DOM 中，不能拷贝，仅仅是在 CSS 3D渲染层添加。较为有效的是下列几个值：

•[String] - 应用引号包含1段标识符串，可能向元素內容中加上标识符串。示例：

attr() – 启用当今元素的特性，能够便捷的例如将照片的 Alt 提醒文本或连接的 Href 详细地址显示信息出来。示例： url() / uri() – 用于引入新闻媒体文档。示例： counter() –  启用计数器，能够不应用目录元素完成编号作用。实际请参照 counter-increment 和 counter-reset 特性的用法。示例：

2 进阶技能

消除波动是1个经常会遇到的难题，很多人的处理方法是加上1个空的 div 运用 clear:both; 特性。如今，不用提升沒有实际意义的元素，仅必须下列款式便可在元素尾部全自动消除波动：

很多人喜爱给 blockquote 引入段加上极大的引号做为情况，这类情况下大家便可以用 :before 来替代 background 了，便可以给情况留下室内空间，还能够立即应用文本而非照片：

 3 殊效妙用

除简易的加上标识符，相互配合 CSS 强劲的精准定位和殊效特点，彻底能够做到给简易的元素此外额外数最多两个器皿的实际效果。有1点必须留意的是，假如不必须內容仅相互配合款式特性做出实际效果，內容特性也不可以为空，即 content:”" 。不然，别的的款式特性1概不容易起效。

飘浮出現方括号

电脑鼠标移上连接，出現方括号：

一样，大家只必须相互配合 display: block 和 position: absolute ，便可以将其当做两个器皿，拼生成飘浮出現双边框的殊效：

以上这篇那些你所不知道的CSS ::before 和::after 伪元素用法便是网编共享给大伙儿的所有內容了，期待能给大伙儿1个参照，也期待大伙儿多多适用脚本制作之家。

原文详细地址：http://www.cnblogs.com/androidshouce/archive/2016/06/12/5576493.html