偽元素內容 · 前端技術總結

## 一、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> ```