在网页内容排版场景中，我们常常需要对段落的首字符或者首行文字做特殊样式处理，来提升版面的层次感和阅读引导性，css的:first-letter和:first-line伪元素就是专门用来实现这类需求的工具，不需要额外添加多余的html标签，就能对文字的指定部分做样式定制。
:first-letter伪元素基础用法
:first-letter伪元素用于选中某个块级元素的第一個字符，我们可以对这个选中的字符单独设置样式，常见的应用场景是首字下沉效果，类似传统印刷书籍的排版样式。
它的基本语法格式如下：
/* 选中p元素的首个字符 */
p:first-letter {
font-size: 2em;
color: #ff5722;
float: left;
margin-right: 8px;
font-weight: bold;
}
上述代码会让所有<p>标签的首字符字体变大、颜色变为橙色、左浮动并和后续文字保持间距，实现简单的首字突出效果。
使用限制说明
:first-letter伪元素并不是对所有元素都生效，它只能应用在块级元素上，比如<p>、<div>、<h1>等，行内元素如<span>如果没有设置display: block则无法生效。同时首字符的判定是忽略前置的空白字符的，如果块级元素开头是图片或者其他替换元素，这个伪元素也不会生效。
:first-line伪元素基础用法
:first-line伪元素用于选中块级元素的第一行文字，第一行的内容会根据元素的宽度和文字大小自动调整范围，当元素宽度变化或者文字大小变化时，选中的内容也会动态变化。
基本语法示例如下：p>
/* 选中p元素的首行文字 */
p:first-line {
color: #333333;
font-weight: 600;
letter-spacing: 1px;
}
这段代码会让段落的首行文字颜色变深、加粗，并且字符间距比后续行大一点，突出首行的引导作用。
可设置的样式范围
:first-line伪元素支持的样式有一定限制，只能设置和文字相关的属性，比如字体、颜色、行高、字间距、文本装饰等，不能设置影响元素盒模型的属性，比如margin、padding、border、width、height等，设置这些属性不会生效。
组合使用实现复杂美化效果
我们可以把两个伪元素组合起来，同时处理首字符和首行文字，实现更丰富的排版效果，比如下面的例子：
/* 组合使用两个伪元素 */
.article-paragraph {
line-height: 1.8;
color: #666666;
font-size: 16px;
text-indent: 2em;
}
.article-paragraph:first-letter {
font-size: 3em;
color: #1e88e5;
float: left;
margin-right: 10px;
margin-top: 5px;
font-family: "楷体";
}
.article-paragraph:first-line {
color: #222222;
font-weight: bold;
font-size: 17px;
}
对应的html结构如下：
<p class="article-paragraph">
在数字化阅读越来越普及的今天，网页内容的排版质量直接影响用户的阅读意愿。良好的排版不仅能提升内容的可读性，还能让用户感受到页面的专业度。很多新手开发者往往会忽略文字细节的样式处理，导致整体页面显得单调平淡。
</p>
这个例子中，段落首字符会变大并使用楷体显示，首行文字加粗且字号稍大，和后续文字形成明显的层次差异，既美观又能引导用户开始阅读。
常见问题解答
- 问：为什么我的
:first-letter样式不生效？答：首先检查元素是不是块级元素，其次检查元素开头是不是有可识别的文本字符，前置的空白或者图片都会导致伪元素无法选中首字符。 - 问：
:first-line选中的内容会固定吗？答：不会，它会根据元素的实际渲染宽度动态计算首行内容，窗口大小变化或者元素宽度变化时，选中的文字范围会自动调整。 - 问：这两个伪元素可以用在表单元素上吗？答：不可以，它们只能用在块级容器元素上，表单的
<input>、<textarea>等元素不支持这两个伪元素。
注意：这两个伪元素都属于css伪元素，在编写的时候要注意前面是单冒号还是双冒号，在css3规范中伪元素推荐使用双冒号
::first-letter、::first-line，但为了兼容旧版本浏览器，单冒号的写法也仍然支持。
cssfirst-letterfirst_line文字美化伪元素修改时间：2026-06-21 07:30:33