详解CSS 伪元素及Content 属性

{- window.getComputedStyle的类型 -}
data PseudoElement = ":before" | "::before" | ":after" | "::after" | ":first-line" | "::first-line" | ":first-letter" | "::first-letter" | "::selection" | ":backdrop" | "::backdrop" | Null

{- 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 putedStyle = window.getComputedStyle(elTarget, "::after")
const content = putedStyle.getPropertyValue("content")
const bg = putedStyle.getAttribute("backgroundColor")
const txtDecoration = putedStyle["text-decoration"]
console.log(content) // "hello world"
console.log(bg)      // red
console.log(txtDecoration) // underline

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

<!-- 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) " ";
  }
}

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] || globalCounters.__temp[name]
}

function applyCSS(mount){
    const clz = mount.className
    if (clz == "dl"){
        resetCounter("dt", 0)
        const children = mount.children
        for (let i = 0; i < children.length; ++i){
          applyCSS(children[i])
        }
    }
    else if (clz == "dt"){
        resetCounter("dd", 0)
        incrementCounter("dt", 1)
        const elAsBefore = document.createElement("span")
        elAsBefore.textContent = counter("dt", "lower-roman") + " "
        mount.insertBefore(mount.firstChild)
    }
    else if (clz == "dd"){
        incrementCounter("dd", 1)
        const elAsBefore = document.createElement("span")
        elAsBefore.textContent = counter("dd", "lower-roman") + " "
        mount.insertBefore(mount.firstChild)
    }
}

.ol
  .li
    .ol
      .li{a}
      .li{b}
  .li
    .ol
      .li{c}
.ol {
    counter-reset: ol;
    & .li::before {
        counter-increment: ol;
        content: counters(ol, ".");
    }
}

p[lang=en]>q{英语}
p[lang=no]>q{挪威语}
p[lang=zh]>q{汉语}
p[lang=en]>q.no-quote{英语2}
div[lang=no]>.quote{挪威语2}

p[lang=en] > q{
  quotes: "<!--" "-->"; / 定义引号 /
}
p[lang=en] > q.no-quote::before{
  content: no-open-quote;
  /或者 content: none;/
}
div[lang=no] > .quote {
  quotes: "<<-" "->>";
}
div[lang=no] > .quote::before {
  content: open-quote;
}
div[lang=no] > .quote::after {
  content: close-quote;
}

p.sep{or}
.sep {
  position: relative;
  text-align: center;
  
  &::before,
  &::after {
    content: "";
    box-sizing: border-box;
    height: 1px;
    width: 50%;
    border-left: 3em solid transparent;
    border-right: 3em solid transparent;
    position: absolute;
    : 50%;
  }
  
  &::before {
    left: 0;
  }
  
  &::after {
    right: 0;
  }
}

.input-group {
  position: relative;
  
  &.readonly::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    : 0;
    left: 0;
  }
}

.selections>input[type=checkbox]{option1}+input[type=checkbox]{option2}
.selection-count
.selections{
  counter-reset: selection-count;
  
  & input:checked {
    counter-increment: selection-count;
  }
}
.selection-count::before {
  content: counter(selection-count);
}