content屬性一般用于::before、::after偽元素中，用于呈現偽元素的內容。平時content屬性值我們用的最多的就是給個純字符，其實它還有很多值可供選擇。
1、插入純字符
| <style> *{margin: 0;padding: 0;box-sizing: border-box;} li{list-style: none;} .content{ position: relative;padding: 10px; border: 1px solid #666;margin: 10px; } .content.only-text::before{ content: '插入純字符'; }</style><body> <h1>1、插入純字符</h1> <div class="content only-text"></div></body> |
2、插入圖片
| <style> *{margin: 0;padding: 0;box-sizing: border-box;} li{list-style: none;} .content{ position: relative;padding: 10px; border: 1px solid #666;margin: 10px; } .content.fill-image::before{ content: url('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png'); }</style><body> <h1>2、插入圖片</h1> <div class="content fill-image"></div></body> |
3、插入元素屬性
| <style> *{margin: 0;padding: 0;box-sizing: border-box;} li{list-style: none;} .content{ position: relative;padding: 10px; border: 1px solid #666;margin: 10px; } .content.fill-dom-attr::before{ content: attr(data-title); }</style><body> <h1>3、插入元素屬性</h1> <div class="content fill-dom-attr" data-title="我是.fill-dom-attr元素的 data-title 屬性值"></div></body> |
4、插入當前元素編號(即當前元素索引)
這個特性可用于活動頁面的規則介紹。
| <style> *{margin: 0;padding: 0;box-sizing: border-box;} li{list-style: none;} .content{ position: relative;padding: 10px; border: 1px solid #666;margin: 10px; } .fill-dom-index li{ position: relative; /* 給計數器加器起個名字，它只會累加 li 標簽的索引，li元素中間的div并不會理會 */ counter-increment: my; } .fill-dom-index li div::before{ /* 使用指定名字的計算器 */ content: counter(my)'- '; color: #f00; font-weight: 600; }</style><body> <h1>4、插入當前元素編號(即當前元素索引)</h1> <div class="content fill-dom-index"> <ul> <li><div>我是第1個li標簽</div></li> <div>我是li標簽中的第1個div標簽</div> <li><div>我是第2個li標簽</div></li> <li><div>我是第3個li標簽</div></li> <div>我是li標簽中的第2個div標簽</div> <li><div>我是第4個li標簽</div></li> <li><div>我是第5個li標簽</div></li> </ul> </div></body> |
