CSS魔法堂：一起玩透伪元素和Content属性

初识伪元素

说起伪元素我第一想到的莫过于::before和::after这两个了，它俩其实就是在其附属的选择器命中的元素上插入第一个子节点和追加最后一个子节点。那这时我不禁地想问：“直接增加两个class为.before和.after不是一样的吗？”

?其实使用伪元素::before和::after以下两个好处：

1. HTML的代码量减少，对SEO有帮助；
2. 提高JavaScript查询元素的效率。

那为什么会这两好处呢？起因就是伪元素并不存在于DOM中，而是位于CSSOM，HTML代码和DOM Tree中均没有它的身影，量少了自然效率有所提升。但这也引入一个问题——我们没办法通过JavaScript完全操控伪元素（我将在下面一节为大家讲述）

一大波伪元从来了

除了::before和::after外，别漏了以下的哦！

1. :first-line：只能用于块级元素。用于设置附属元素的第一个行内容的样式。可用的CSS属性为font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height,clear。
2. :first-letter：只能用于块级元素。用于设置附属元素的第一个字母的样式。可用的CSS属性为font,color,background,marin,padding,border,text-decoration,vertical-align,text-transform,line-height,float,clear。
3. ::selection：匹配选中部分的内容。可用的CSS属性为background,color。

有没有发现有的伪元素前缀是:有的却是::呢？::是CSS3的写法，其实除了::selection外，其余伪元素既两种前缀都是可以的，为兼容性可选择使用:，为容易区分伪元素和伪类则使用::，但我还是建议使用::来提高可读性，兼容性就让postcss等工具帮我们解决就好了。

::before和::after的注意事项

1. 默认display: inline；
2. 必需设置content属性，否则一切都是无用功；
3. 默认user-select: none，就是::before和::after的内容无法被客户选中的；
4. 伪元素和伪类结合使用形如：.target:hover::after。

JavaScript操作伪元素

上文提到因为伪元素仅位于CSSOM中，因而我们仅能通过操作CSSOM API——window.getComputedStyle来读取伪元素的样式信息，注意：我们能做的就是读取，无法设置的哦！

{- window.getComputedStyle的类型 -}
data PseudoElement = ":before" | "::before" | ":after" | "::after" | ":first-line" | "::first-line" | ":first-letter" | "::first-letter" | "::selection" | ":backdrop" | "::backdrop" | Null
window.getComputedStyle :: HTMLElement -> PesudoElement -> CSSStyleDeclaration
{- CSSStyleDeclaration实例的方法 -}
data CSSPropertyName = "float" | "backround-color" | ......
data DOMPropertyName = "cssFloat" | "styleFloat" | "backgroundColor" | ......
-- IE9+的方法
CSSStyleDeclaration#getPropertyValue :: CSSPropertyName -> *
-- IE6~8的方法
CSSStyleDeclaration#getAttribute :: CSSPropertyName -> *
-- 键值对方式获取
CSSStyleDeclaration#[DOMPropertyName] -> *

示例：

.target[title="hello world"]::after{
 display: inline-block;
 content: attr(title);
 background: red;
 text-decoration: underline;
}
const elTarget = document.querySelector(".target")
const computedStyle = window.getComputedStyle(elTarget, "::after")
const content = computedStyle.getPropertyValue("content")
const bg = computedStyle.getAttribute("backgroundColor")
const txtDecoration = computedStyle["text-decoration"]
console.log(content) // "hello world"
console.log(bg) // red
console.log(txtDecoration) // underline

玩透Content属性

到这里我们已经可以利用::before和::after实现tooltip等效果了，但其实更为强大的且更需花时间研究的才刚要开始呢！那就是Content属性，不仅仅可以简单直接地设置一个字符串作为伪元素的内容，它还具有肯定限度的编程能力，就如上面attr(title)那样，以其附属元素的title特性作为content值。下面请允许我为大家详情吧！

div::after{
 content: "普通字符串";
 content: attr(父元素的html属性名称);
 content: url(图片、音频、视频等资源的url);
 /* 使用unicode字符集，采用4位16进制编码
 * 但不同的浏览器显示存在差异，而且手机端识别度更差
 */
 content: "\21e0";
 /* content的多个值可以任意组合，各部分通过空格分隔 */
 content: "'" attr(title) "'";
 
 /* 自增计数器，用于插入数字/字母/罗马数字编号
 * counter-reset: [ ?]+，必选，用于标识自增计数器的作用范围，为自己设置名称，为起始编号默认为0。
 * counter-increment: [ ?]+，用于标识计数器与实际关联的范围，为counter-reset中的自己设置名称，为步长默认为1。
 * : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha
 */
 content: counter(, );
 
 /* 以父附属元素的qutoes值作为content的值
 */
 content: open-quote | close-quote | no-open-quote | no-close-quote;
}

换行符：HTML实体为，CSS为\A，JS为\\uA。

可以看到Content接受6种类型，和一种组合方式。其中最后两种比较复杂，我们后面逐一说明。

自己设置计数器

HTML为我们提供ul或者ol和li来实现列表，但假如我们希望实现更为可性化的列表，那么该如何解决呢？content属性的counter类型值就能帮到我们。

.dl
 .dt{chapter1}
 .dd{text11}
 .dd{text12}
 .dt{chapter2}
 .dd{text21}
 
/* CSS部分 */
.dl {
 counter-reset: dt 0; /* 表示解析到.dl时，重置dt计数器为0 */
 
 & .dt {
 counter-reset: dd 0; /* 表示解析到.dt时，重置dd计数器为0 */
 
 &::before{
 counter-increment: dt 1; /* 表示解析到.dt时，dt计数器自增1 */
 content: counter(dt, lower-roman) " ";
 }
 }
 
 & .dd::before {
 counter-increment: dd 1; /* 表示解析到.dd时，dd计数器自增1 */
 content: counter(dd) " ";
 }
}