【修真院web小課堂】知道css有個content屬性嗎？有什麼作用？有什麼應用？

知道css有個content屬性嗎？有什麼作用？有什麼應用？

小課堂【北京-WEB-A組】
分享人：郭晨陽

大家好，我是IT修真院北京分院第35期的學員郭晨陽，一枚正直、純潔、善良的前端程序員。

今天給大家分享一下，修真院官網css任務15，深度思考中的知識點——知道css有個content屬性嗎？有什麼作用？有什麼應用？

1.背景介紹

學習前端知識我們常常提到盒模型，盒模型的幾個要素，margin、border、padding 、content這四個屬性，前三個經常用到講到，但第四個content屬性怎麼用？今天我們就來講講這個 。
content的意思顧名思義，是“內容”，它的作用就是在css中直接生成網頁顯示的 內容， 這個屬性要結合：before和：after這倆個僞類屬性來使用。下面詳細介紹它的用法 。

2.知識剖析

before和after是什麼呢？

:before和:after的作用就是在指定的元素內容（而不是元素本身）之前或者之後插入一個包含content屬性指定內容的行內元素.需要注意的是如果沒有content屬性，僞類元素將沒有任何作用。但是可以指定content爲空，插入的內容默認是一個行內元素，並且在HTML源代碼中無法看到，這就是爲什麼稱之爲僞類元素的理由，所以也就無法通過DOM對其進行操作。僞類元素也會像其他子元素一樣正常繼承父元素的一些CSS屬性，比如字體等。

3.常見問題

content各屬性值的具體使用方法

4.解決方案

CSS中主要的僞元素有四個：before/after/first-letter/first-line，在before/after僞元素選擇器中，有一個content屬性，能夠實現頁面中的內容插入。

插入純文字
content:”插入的文章”，或者content:none不插入內容
html:

<h1>這是h1</h1>
<h2>這是h2</h2>

css

h1::after{
    content:"h1後插入內容"
}
h2::after{
    content:none
}

嵌入文字符號
可以使用content屬性的open-quote屬性值和close-quote屬性值在字符串兩邊添加諸如括號、單引號、雙引號之類的嵌套文字符號。open-quote用於添加開始的文字符號，close-quote用於添加結束的文字符號。修改上述的css:

h1{
    quotes:"(" ")";  /*利用元素的quotes屬性指定文字符號*/
}
h1::before{
    content:open-quote;
}
h1::after{
    content:close-quote;
}
h2{
    quotes:"\"" "\"";  /*添加雙引號要轉義*/
}
h2::before{
    content:open-quote;
}
h2::after{
    content:close-quote;
}

插入圖片
content屬性也可以直接在元素前/後插入圖片
html:

<h3>這是h3</h3>

css:

h3::after{
    content:url(img.png)
}

插入元素的屬性值
content屬性可以直接利用attr獲取元素的屬性，將其插入到對應位置。
html:

<a href="http:///www.baidu.com">這是鏈接&nbsp;&nbsp;</a>

css:

a:after{
    content:attr(href);
}

5.編碼實戰

點開鏈接

6.擴展思考

爲什麼content屬性很少用到？
前端書寫代碼時提倡內容樣式的分離，而content在css中插入內容正好又混淆了這一原則；並且該屬性兼容性也不太好。

7.參考文獻

參考一：CSS3的content屬性詳解
參考二：菜鳥教程content屬性

8.更多討論

1，元素能直接使用 content？

可以在元素後面結合after，before使用。

2，Content的使用必須要結合僞類嗎？

是的，只能結合僞類使用。如果你要加上內容的話。

3，還有什麼別的內容可以加。
可以加上項目編號、種類、修飾、嵌套等。

感謝大家觀看

By 郭晨陽

---

技能樹.IT修真院

“我們相信人人都可以成爲一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。

這裏是技能樹.IT修真院，成千上萬的師兄在這裏找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。快來與我一起學習吧 ！

猛戳這裏有驚喜

---