css 伪元素（before，after，first-letter，first-line）

最新推荐文章于 2025-05-17 08:42:44 发布

原创最新推荐文章于 2025-05-17 08:42:44 发布 · 980 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#after #before #css伪元素

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了 CSS 中的伪元素如 :first-letter, :first-line, :before 和 :after 的使用方法，并通过实例展示了如何为文本的第一行添加特殊样式以及如何在元素前后添加内容。

语法>> 标签样式/类样式：伪元素{ 属性：值 }(css3有::after的写法为了将伪类和伪元素区分开来)

属性	描述	CSS
:first-letter	向文本的第一个字母添加特殊样式。	1
:first-line	向文本的首行添加特殊样式。	1
:before	在元素之前添加内容。	2
:after	在元素之后添加内容。	2

注意： "first-letter" 伪元素只能用于块级元素

例如：

html：

<div>
   这里是第一行<br/>
   这里是第二行<br/>
   这里是第三行<br/>
   这里是第四行<br/>
</div>

css:

/*"first-line" 伪元素用于向文本的首行设置特殊样式。*/
div:first-line  {
color: #ff0000;
font-variant: small-caps
}
div:after
{
content:"在元素最后加入新内容";//content:url(logo.gif)也可以插入一张图片
color: rgb(58, 117, 215)
}

效果：