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（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。
`