1.背景介紹
學習前端知識我們常常提到盒模型，盒模型的幾個要素，margin、border、padding 、content這四個屬性，前三個經常用到講到，但第四個content屬性怎麼用？今天我們就來講講這個 。
content的意思顧名思義，是“內容”，它的作用就是在css中直接生成網頁顯示的 內容， 這個屬性要結合：before和：after這倆個僞類屬性來使用。下面詳細介紹它的用法 。
2.知識剖析
before和after是什麼呢？
:before和:after的作用就是在指定的元素內容（而不是元素本身）之前或者之後插入一個包含content屬性指定內容的行內元素.需要注意的是如果沒有content屬性，僞類元素將沒有任何作用。但是可以指定content爲空，插入的內容默認是一個行內元素，並且在HTML源代碼中無法看到，這就是爲什麼稱之爲僞類元素的理由，所以也就無法通過DOM對其進行操作。僞類元素也會像其他子元素一樣正常繼承父元素的一些CSS屬性，比如字體等。
三.常見問題
content各屬性值的具體使用方法
四.解決方案
插入內容可以直接在content後面加入。
<h1>我是大標題   </h1>
h1::after{ content:"我是插入內容" }效果如下。
插入圖片
<h3>我是要插入圖片的h3</h3>
h3::after{ content:url(../jsimages/task2-fanpai.png) }
效果如下
插入編號
<h5>我是給要編號的h5</h5> <h5>我是給要編號的h5</h5> <h5>我是給要編號的h5</h5>
h5{ counter-increment:my; } p::after{ content: "neifjdlsfldskfkjldsfk.dsjfjsklfjkl"; }
效果如下：
更多用法 點擊打開鏈接
五.編碼實戰
請看上面
六.拓展思考
爲什麼content屬性很少用到
個人認爲，我們前端書寫代碼時提倡內容樣式的分離，而content的僞類寫法正好又混淆了這一原則。
七.參考文獻
八.更多討論
1，元素能直接使用 content？
可以在元素後面結合after，before使用。
2，Content的使用必須要結合僞類嗎？
是的，只能結合僞類使用。如果你要加上內容的話。
3，還有什麼別的內容可以加?
可以加上，屬性值，文字符號，指定編號種類等。
技能樹.IT修真院
“我們相信人人都可以成爲一個工程師，現在開始，找個師兄，帶你入門，掌控自己學習的節奏，學習的路上不再迷茫”。
這裏是技能樹.IT修真院，成千上萬的師兄在這裏找到了自己的學習路線，學習透明化，成長可見化，師兄1對1免費指導。
快來與我一起學習吧~邀請鏈接 http://www.jnshu.com/login/1/14303208