伪元素内容 · 前端技术总结

## 一、content内容 ``` .box::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 | georgian | lower-alpha | upper-alpha */ content: counter(<identifier>, <list-style-type>); /* 以父附属元素的qutoes值作为content的值 */ content: open-quote | close-quote | no-open-quote | no-close-quote; } ``` ## 二、js获取伪元素style属性值 ``` <!DOCTYPE html> <html> <head> <title>伪元素</title> <style type="text/css"> .title[title="hello world"]::after{ display: inline-block; content: attr(title); background: red; text-decoration: underline; } </style> </head> <body> <h2 class="title" title="hello world"></h2> <script type="text/javascript"> var titleEle = document.querySelector(".title") var computedStyle = window.getComputedStyle(titleEle, "::after") var content = computedStyle.getPropertyValue("content") var bgColor = computedStyle.getPropertyValue("background-color") var txtDecoration = computedStyle["text-decoration"] console.log(content) // "hello world" console.log(bgColor) // rgb(255, 0, 0) console.log(txtDecoration) // underline solid rgb(0, 0, 0) </script> </body> </html> ```