近因为一些网页的需要，需要比较深入的使用了CSS 的「伪元素」( Pseudo Element )，发现原来不只是用用before或after 而已，可以玩的东西还真是不少，所以就来篇文章，把这些比较不常玩的用法归纳整理下，希望对你的日常工作有所帮助。

什么是「伪元素」？

「伪元素」之所以称作「伪」，除了英文从「Pseudo」翻译过来之外，就是因为它并不是真正网页里的元素，但行为与表现又和真正网页元素一样，也可以对其使用CSS 操控。

跟伪元素类似的还有「伪类」( Pseudo classes )，在W3C的定义里总共有五个伪元素(其他仍在测试阶段)，分别是::before、::after、::first-line、::first-letter和::selection，为了和伪类区分，伪元素使用两个冒号「::」开头，而伪类使用一个冒号「:」开头(像是:hover、:target...等)。

虽然现在的浏览器就算写一个冒号也可以正常运作，不过为了方便区分，用两个冒号还是比较好的，而且不论浏览器是什么，::selection必须是两个冒号才能正常运作。

参考：MDN Pseudo-elements、伪类child和of-type

认识::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(图片网址);
}

通过调整border的属性，我们可以实现上下左右的三角形，再结合伪元素before，after，content可以绘制多种多边形，笔者在这篇文章有过介绍，感兴趣的可以看看 ：只用1个div，你能用CSS绘制：正3、4、5、6、7、8边形吗？

content搭配quotes使用

在CSS里有个不常用的属性就是quotes，这是做为定义「括号格式」的属性，也就是如果在一段文字被包住，这段文字的前后就会出现自定义的标签替换（可以是括号、特殊符合、文字等），而且quotes支持多层嵌套，也就是你可以一层层的写下去，以下面这段HTML文字举例：

最外层<q>第一层<q>第二层</q><q>第二层<q>第三层</q></q></q>

quotes 的属性如果只写一层，就会看到只出现一种括号，前后括号使用空白分隔，两组为一个单位，前后可以不同符号。

q{
 quotes: ' < ' ' > ';
}

如果写了三层，就会看到出现三种括号，也会把文字当作括号使用。

q{
 quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}

（请注意开合标签的就近分配原则）

同样的道理，我们可以应用在content里面，而且通过伪元素::before和::after处于前后的预设位置，甚至不用就实现前后括号的效果，以下面这段HTML文字举例，把刚刚的q全部换成span：

最外层<span>第一层<span>第二层</span><span>第二层<span>第三层</span></span></span>

CSS的部分比较特别，在伪元素content里使用了open-quote (启始括号)和close-quote (结束括号)这两个有趣的值，换句话说open-quote对应到，close-quote对应到，此外也由于括号是在伪元素内，就可以指定不同的颜色或样式了。

span{
 quotes: ' < ' ' > ' ' ya ' ' ya ' ' ( ' ' ) ' ;
}
span::before{
 content:open-quote;
 color:red;
}
span::after{
 content:close-quote;
 color:#aaa;
}

文章来源：https://www.oxxostudio.tw/articles/201706/pseudo-element-1.html

原文作者：oxxostudio

由于网页为繁体内容，术语描述和标点话术的差异的问题，笔者在保证不改变原意的基础上做了调整，并且内容页进行了验证确认无误，欢迎大家指正。

小结

虽然说伪元素很好用，但伪元素的内容实际上不存在网页里( 如果打开浏览器的开发者工具，是看不到内容的)，所以如果在里头塞了太多的重要的内容，反而会影响到SEO 的成效，因此对于使用伪元素的定位，还是当作「辅助」性质会比较恰当。

于CSS中的：before和：after伪元素，相信大家都不陌生，下面就来讲解下这些元素的具体运用！

:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。

:after是css中的一种伪元素，可用于在某个元素之后插入某些内容。

先来个实例：

<style>

p:before{ content: "H" }

p:after{ content: "d" }

</style>

<p>ello Worl</p>

以上代码会在页面展示是：Hello World

在浏览器审查元素中的内容是

p标签内部的内容的前面会被插入一个:before伪元素，该伪元素内包含的内容是"H"；而在p标签内的内容后面会被插入一个:after伪元素，该元素包含的内容是"d"。

上面只是简单的入门这两者元素之间的简单格式运用，下面来看看平常该怎么使用它们。

结合border写个对话框样式

首先要实现对话框，先来实现border画三角形样式

<style>

.triangle{

width: 0;

height: 0;

border:50px solid transparent;

border-top-color: black;

}

</style>

<div class="triangle"></div>

得到了一个顶部方向向下的三角形

接下来我们加上:before和:after：

<style>

.test-div{

position: relative;

width:150px;

height: 36px;

border:1px solid black;

border-radius:5px;

background: rgba(245,245,245,1)

}

.test-div:before,.test-div:after{

content: "";

display: block;

position: absolute;

top:8px;

width: 0;

height: 0;

border:6px solid transparent;

}

.test-div:before{

left:-11px;

border-right-color: rgba(245,245,245,1);

z-index:1

}

.test-div:after{

left:-12px;

border-right-color: rgba(0,0,0,1);

z-index: 0

}

</style>

<div class="test-div"></div>

效果如下：

运用伪元素就能做出一个对话框图形出来了，当然运用:before和:after还能更方便的制作出很多效果，下节再讲解讲解！