如何使用css中的content屬性？
.jpg)
10年積累的網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有東寶免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
content屬性一般用于::before、::after偽元素中，用于呈現(xiàn)偽元素的內(nèi)容。
用法詳解
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>
<h2>1、插入純字符</h2>
<div class="content only-text"></div>
</body>2、插入圖片
.jpg)
<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>
<h2>2、插入圖片</h2>
<div class="content fill-image"></div>
</body>3、插入元素屬性
.jpg)
<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>
<h2>3、插入元素屬性</h2>
<div class="content fill-dom-attr" data-title="我是.fill-dom-attr元素的 data-title 屬性值"></div>
</body>4、插入當(dāng)前元素編號(hào)(即當(dāng)前元素索引)
這個(gè)特性可用于活動(dòng)頁面的規(guī)則介紹。
.jpg)
<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;
/* 給計(jì)數(shù)器加器起個(gè)名字，它只會(huì)累加 li 標(biāo)簽的索引，li元素中間的div并不會(huì)理會(huì) */
counter-increment: my;
}
.fill-dom-index li div::before{
/* 使用指定名字的計(jì)算器 */
content: counter(my)'- ';
color: #f00;
font-weight: 600;
}
</style>
<body>
<h2>4、插入當(dāng)前元素編號(hào)(即當(dāng)前元素索引)</h2>
<div class="content fill-dom-index">
<ul>
<li><div>我是第1個(gè)li標(biāo)簽</div></li>
<div>我是li標(biāo)簽中的第1個(gè)div標(biāo)簽</div>
<li><div>我是第2個(gè)li標(biāo)簽</div></li>
<li><div>我是第3個(gè)li標(biāo)簽</div></li>
<div>我是li標(biāo)簽中的第2個(gè)div標(biāo)簽</div>
<li><div>我是第4個(gè)li標(biāo)簽</div></li>
<li><div>我是第5個(gè)li標(biāo)簽</div></li>
</ul>
</div>
</body>5、插入當(dāng)前元素編號(hào)(指定種類)
.jpg)
<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-index2 li{
position: relative;
counter-increment: my2;
}
.fill-dom-index2 li div::before{
/* 第二個(gè)參數(shù)為list-style-type，可用值見： http://www.w3school.com.cn/cssref/pr_list-style-type.asp*/
content: counter(my2,lower-latin)'- ';
color: #f00;
font-weight: 600;
}
</style>
<body>
<h2>5、插入當(dāng)前元素編號(hào)(指定種類)</h2>
<div class="content fill-dom-index2">
<ul>
<li><div>我是第1個(gè)li標(biāo)簽</div></li>
<div>我是li標(biāo)簽中的第1個(gè)div標(biāo)簽</div>
<li><div>我是第2個(gè)li標(biāo)簽</div></li>
<li><div>我是第3個(gè)li標(biāo)簽</div></li>
<div>我是li標(biāo)簽中的第2個(gè)div標(biāo)簽</div>
<li><div>我是第4個(gè)li標(biāo)簽</div></li>
<li><div>我是第5個(gè)li標(biāo)簽</div></li>
</ul>
</div>
</body>以上就是詳解css中的content屬性的用法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注創(chuàng)新互聯(lián)其它相關(guān)文章！
當(dāng)前題目：如何使用css中的content屬性？
分享路徑：http://jinyejixie.com/article44/jpoehe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、服務(wù)器托管、建站公司、做網(wǎng)站、定制開發(fā)、網(wǎng)站收錄
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)
- 網(wǎng)站建設(shè)完成后為什么百度不收錄？ 2016-11-09
- 提高采集內(nèi)容收錄量和排名的方法是什么? 2015-10-01
- 網(wǎng)站一直不收錄，外鏈?zhǔn)怯绊懢W(wǎng)站收錄的因素嗎？ 2022-04-28
- 那些導(dǎo)致百度收錄停滯不前的原因 2016-11-01
- 如何快速收錄，如何讓網(wǎng)站內(nèi)容被百度快速收錄？ 2016-08-20
- 百度為什么不收錄新發(fā)布的文章？ 2014-08-01
- 如何找出網(wǎng)站收錄異常的罪魁禍?zhǔn)? 2022-06-05
- 想要提升網(wǎng)站收錄率，這么做才對(duì)！ 2013-10-17
- 網(wǎng)站收錄的因素有哪些？ 2013-12-30
- 新網(wǎng)站上線如何快速收錄 2016-10-31
- 網(wǎng)站收錄量增加關(guān)鍵詞排名為什么下降 2016-11-06
- SEO優(yōu)化可以運(yùn)用哪些方式促進(jìn)收錄？ 2015-02-14