CSS伪元素与Content属性的详细区分（代码示例）

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

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

自定义计数器

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

<!-- HTML 部分-->
.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) " ";
  }
}
通过counter-reset来定义和重置计数器，通过counter-increment来增加计数器的值，然后通过counter来决定使用哪个计数器，并指定使用哪种样式。
?如果用JavaScript来表示应该是这样的
const globalCounters = {"__temp":{}}

function resetCounter(name, value){
  globalCounters[name] = value
}
function incrementCounter(name, step){
  const oVal = globalCounters[name]
  if (oVal){
    globalCounters[name] = oVal + step
  }
  else{
    globalCounters.__temp[name] = step
  }
}
function counter(name, style){
    return globalCounters[name]   
关键词：CSS伪元素与Content属性的详细区分（代码示例）