共计 2311 个字符，预计需要花费 6 分钟才能阅读完成。
最近因为一些网页的需要，比较深入的使用了 CSS 的“伪元素”（Pseudo Element），发现原来不只是用用 before 或 after 而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法纪录一下。
什么是“伪元素”？“伪元素”之所以称作“伪”，除了英文从“Pseudo”翻译过来之外，就是因为它并不是真正网页里的元素，但行为与表现又和真正网页元素一样，也可以对其使用 CSS 操控。
跟伪元素类似的还有“伪类”（Pseudo classes），在 W3C 的定义里总共有五个伪元素（其他仍在测试阶段），分别是::before、::after、::first-line、::first-letter 和::selection，为了和伪类区分，伪元素使用两个冒号“::”开头，而伪类使用一个冒号“:”开头（像是:hover、:target…等）。
虽然现在的浏览器就算写一个冒号也可以正常运作，不过为了方便区分，用两个冒号还是比较好的，而且不论浏览器是什么，::selection 必须是两个冒号才能正常运作。
认识::before 与::after::before、::after 大概是最常使用的伪元素，两者都是以 display:inline-block 的属性存在，::before 是在原本的元素“之前”加入内容，::after 则是在原本的元素“之后”加入内容，同时伪元素也会“继承”原本元素的属性，如果原本文字是黑色，伪元素的文字也会是黑色。
举例来说，下面这段代码，有一个 div 内容是“大家好，我是 div”，使用::before、::after 之后，会在原本 div 的前后各添加一段文字，并且让这两段文字都呈现红色。
div::before{
content:” 我是 before”;
color:red;
}
div::after{
content:” 我是 after”;
color:red;
}
实用的 content 上述的内容乍看之下很容易理解，比较需要注意的是一定要具备 content 的属性，就算是只有 content:“”；都可以，因为没有 content 的伪元素是不会出现在画面上的，然而 content 是个很特别的属性，它可以使用 attr 直接获取内容元素的属性值（attribute），举例来说，在 HTML 里有一个超链接，点击后会弹出新视窗并连接至 Google：
<a href=”https://www.google.com” target=”_blank”>google</a>
使用下列的代码用法，将会把超链接的 href 内容与 target 内容，透过伪元素一前一后的显示出来。
a::before{
content: attr(href);
color:red;
}
a::after{
content: attr(target);
color:green;
}
此外 content 内容是可以“相加”的，不过用法不像 JavaScript 使用 + 号来相连，而是直接用一个空格键就可以不断的累加下去，以下面的代码来说，可以在刚刚撷取的超链接文字后方和 target 属性前方，加入标点符号。
a::before{
content: “(” attr(href) ” ) < “;
color:red;
}
a::after{
content: ” > (” attr(target) ” ) “;
color:green;
}
content 甚至可以使用 url 放入图片图片的功能，下列的代码会呈现出三张图片。
div::before{
content:url(图片网址) url(图片网址) url(图片网址);
}
content 搭配 quotes 使用在 CSS 里有个不常用的属性就是 quotes，这是做为定义“括号格式”的属性，也就是如果在一段文字被 <q></q> 包住，这段文字的前后就会出现自定义的括号，而且 quotes 支持巢状的结构，也就是你可以一层层的写下去，以下面这段 HTML 文字举例：
最外层 <q> 第一层 <q> 第二层 </q><q> 第二层 <q> 第三层 </q></q></q>
quotes 的属性如果只写一层，就会看到只出现一种括号，前后括号使用空白区隔，两组为一个单位，前后可以不同符号。
q{
quotes: ‘ < ‘ ‘ > ‘;
}
如果写了三层，就会看到出现三种括号，支持把文字当作括号使用。
q{
quotes: ‘ < ‘ ‘ > ‘ ‘ ya ‘ ‘ ya ‘ ‘ (‘ ‘) ‘ ;
}
同样的道理，我们可以应用在 content 里面，而且透过伪元素已::before 和::after 已经处于前后的预设位置，甚至不用 <q></q> 就实现前后括号的效果，以下面这段 HTML 文字举例，把刚刚的 q 全部换成 span：
最外层 <span> 第一层 <span> 第二层 </span><span> 第二层 <span> 第三层 </span></span></span>
CSS 的部分比较特别，在伪元素 content 里使用了 open-quote（启始括号）和 close-quote（结束括号）这两个有趣的值，换句话说 open-quote 对应到 <q>，close-quote 对应到 </q>，此外也由于括号是在伪元素内，就可以指定不同的颜色或样式了。
span{
quotes: ‘ < ‘ ‘ > ‘ ‘ ya ‘ ‘ ya ‘ ‘ (‘ ‘) ‘ ;
}
span::before{
content:open-quote;
color:red;
}
span::after{
content:close-quote;
color:#aaa;
}
小结虽然说伪元素很好用，但伪元素的内容实际上不存在网页里（如果打开浏览器的开发者工具，是看不到内容的），所以如果在里头塞了太多的重要的内容，反而会影响到 SEO 的效果，因此对于使用伪元素的定位，还是当作“辅助”性质会比较恰当。
