CSS生成内容

最新推荐文章于 2024-04-12 01:19:50 发布

原创最新推荐文章于 2024-04-12 01:19:50 发布 · 676 阅读

CC 4.0 BY-SA版权

文章标签：

53 篇文章

订阅专栏

53 篇文章

订阅专栏

53 篇文章

订阅专栏

本文介绍了CSS的content属性以及:before和:after伪元素。:before伪元素可在元素内容最前面插入生成内容，:after伪元素则在最后面插入。默认二者为行内元素，可通过display属性改变。还推荐了前端学习交流群。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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