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

示例：

.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值。下面请允许我为大家介绍吧！
p::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   
关键词：CSS伪元素与Content属性的详细区分（代码示例）