CSS伪元素（前后）

最近由于一些网页的需要，深入使用了CSS“伪元素”（PseudoElement），发现不仅是前后，还有还有可以玩的东西。有不少，这里写一篇文章记录下这些比较不常用的用法。什么是“伪元素”？“伪元素”之所以被称为“伪”，除了英文翻译自“Pseudo”外，还因为它不是真实网页中的元素，但其行为和表现与一个真正的网页元素，它也可以使用CSS操作。与伪元素类似，还有“伪类”（Pseudoclasses）。W3C定义中一共有五个伪元素（其他还在测试阶段），分别是::before、::after、::first-line、::first-letter和::selection，依次为为了区别于伪类，伪元素以两个冒号“::”开头，伪类以一个冒号“:”开头（如:hover、:target...等）。虽然现在的浏览器写一个冒号也能正常工作，但是为了方便区分还是用两个冒号比较好，而且不管是什么浏览器，::selection都必须有两个冒号才能正常工作。认识::before和::after::before，::after可能是最常用的伪元素，它们都以属性display:inline-block存在，::before添加在原始元素Content的“之前”,::after是在原始元素“之后”添加内容，伪元素也会“继承”原始元素的属性。如果原始文本是黑色的，那么伪元素的文本也会是黑色的。比如下面的代码中，有一个div，内容是“大家好，我是div”。使用::before和::after后，会在原来的div前后添加一段文字，两段文字全部显示为红色。div::before{content:"我在之前";颜色：红色；}div::after{内容：“我在”；color:red;}实用内容上面的内容乍一看很容易理解，需要注意的是必须要有content属性，即使只有content:"";没关系，因为没有content的伪元素是不会出现在屏幕上的，但是content是一个很特殊的属性，它可以使用attr直接获取content元素的属性值（attribute）。例如，HTML中有一个超链接。点击后会弹出一个新的窗口连接Google：google使用如下代码用法来显示href内容和超链接的目标内容依次通过伪元素。a::before{内容：属性（href）；颜色：红色；}a::after{内容：属性（目标）；color:green;}另外content内容可以“加”，但是用法不像JavaScript用+号连接，而是直接用一个空格键连续累加。以下面的代码为例，你可以在刚刚提取的超链接文本之后，target属性之前添加标点符号。a::before{内容：“（”attr（href）“）<”;颜色：红色；}a::after{内容：">("attr(target)")";color:green;}contenteven可以使用url放图片的功能，下面的代码会显示三张图片。div::before{content:url(imageurl)url(imageurl)url(imageurl);}content使用引号。CSS中有一个不常见的属性是quotes，它用来定义“括号格式”属性，即如果一段文字被括起来，则在这一段前后会出现自定义的括号文本，引号支持嵌套结构，即可以一层一层往下写，以下面的HTML文本为例：最外层第一层第二层第二层第三层quotes属性，会看到只出现一种括号，前后括号由空格分隔。两组为一个单元，前后括号可以有不同的符号。q{quotes:'<''>';}如果写三层，会看到三种括号，支持使用文字作为括号。q{quotes:'<''>''ya''ya''('')';}同样的原理可以应用到内容上，通过伪元素::before和::after已经在了前后预设位置，即使不用也能达到前后括号的效果，以下面的HTML文本为例，将刚才的q全部替换成span：最外层的第一层第二层第二层第三层CSS的部分比较特殊。open-quote是用在伪元素内容中（启蒙开括号）和close-quote（结束括号），这两个有趣的值，也就是说open-quote对应，close-quote对应，也因为括号在伪元素内部，你可以指定不同的颜色或样式。span{引号:'<''>''ya''ya''('')';}span::before{content:open-quote;color:red;}span::after{content:close-quote;color:#aaa;}总结伪元素虽然很好用，但是伪元素的内容实际上并不存在于网页中（打开浏览器的开发者工具是看不到内容的），所以如果你放太多重要的内容会影响SEO的效果，所以用伪元素定位“辅助”比较合适。