CSS生成內容

CSS:content屬性

CSS:before僞元素

在元素內容的最前面插入生成內容。默認地，這個僞元素是行內元素，不過可以使用屬性 display 改變這一點。

原文本代碼：

1 <p>三人行，必有我師也！</p>
2 <p>學而不思則罔，思而不學則殆！</p>
3 <p>有朋自遠方來，不亦說乎！</p></pre>

效果圖：

在每行文本前方插入內容：子曰

p:before{
                content: "子曰:";
                font-size: 30px;
                font-weight: bold;
            }

效果：

**　　　　　CSS:after僞元素**

在元素內容的最後面插入生成內容。默認地，這個僞元素是行內元素，不過可以使用屬性 display 改變這一點。

在每行文本後方插入內容：-摘自《論語》

p:after{
                content: "-摘自《論語》";
                float: right;
            }

效果：

最後，給大家推薦一個前端學習進階內推交流羣685910553（前端資料分享），不管你在地球哪個方位，
不管你參加工作幾年都歡迎你的入駐！（羣內會定期免費提供一些羣主收藏的免費學習書籍資料以及整理好的面試題和答案文檔！）

如果您對這個文章有任何異議，那麼請在文章評論處寫上你的評論。

如果您覺得這個文章有意思，那麼請分享並轉發，或者也可以關注一下表示您對我們文章的認可與鼓勵。
`