這篇文章將為大家詳細(xì)講解有關(guān)css3中content和attr屬性的作用，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

10年的湄潭網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營銷型網(wǎng)站的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整湄潭建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)建站從事“湄潭網(wǎng)站設(shè)計(jì)”,“湄潭網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

CSS3中的content屬性可以通過CSS在頁面元素中填寫內(nèi)容，還可以實(shí)現(xiàn)字符串連接操作；content和attr配合使用可以從元素中動(dòng)態(tài)的獲取內(nèi)容

CSS3的出現(xiàn)使得樣式表的功能變得越來越強(qiáng)大，同樣也使得開發(fā)越來越簡單便捷。尤其是CSS3中出現(xiàn)的新特性，如transitions, animations, 和 transforms等，這里面有一個(gè)特征雖然不是那么搶眼，但卻是非常的有用，它就是content和attr表達(dá)式，它們能在頁面下面悄悄的使用CSS來生成內(nèi)容，下面讓我們看看 attr 和 content 如何相互配合產(chǎn)生神奇效果的。

基本content用法

content屬性能讓程序員使用CSS往頁面元素里填寫內(nèi)容

例：

.myDiv:after { content: "我是一個(gè)使用*content*屬性生產(chǎn)的靜態(tài)文字"; }

請(qǐng)注意，如果想讓偽元素:after絕對(duì)定位，必須對(duì)div設(shè)置position: relative

content和attr配合使用

如果不想把content內(nèi)容在CSS里寫死，那么可以使用attr表達(dá)式來從頁面元素中動(dòng)態(tài)的獲取內(nèi)容：

/* 
 */ 
div[data-line]:after { 
 content: attr(data-line); 
/* 屬性名稱上不要加引號(hào)！ */ }

attr屬性通常和自定義屬性data-配合使用，因?yàn)閭鹘y(tǒng)的其它屬性雖然也能存值，但通常不適合存放表達(dá)性文字。

content里的字符串連接操作

這種字符串連接很像常規(guī)編程語言：

/* 
 */ 
div[data-line]:after
 { content: "[line " attr(data-line) "]"; }

在CSS3中就可以完成像JavaScript里的字符串拼接，另外attr的動(dòng)態(tài)生成頁面內(nèi)容也是一件很有用的事。我們可以用它配合content對(duì)頁面的很多其他元素和屬性進(jìn)行操作。

關(guān)于css3中content和attr屬性的作用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。