如何在CSS中使用:first-letter结合::before制作首字母装饰效果

在网页排版中，利用CSS的:first-letter伪元素和::before伪元素，可以在不修改HTML结构的情况下，为段落首字母添加装饰效果。:first-letter用于选中块级元素文本的第一个字母，::before用于在元素内容前插入生成内容，二者配合能够做出首字下沉、带背景块或符号修饰的首字母样式。

基本实现思路

我们可以让容器通过::before生成装饰层，再使用:first-letter对首字母本身设置字体、颜色与浮动，从而形成组合效果。下面演示一个首字母放大并带圆形底色的常见写法。

/* 段落基础样式 */
.decorate p {
  position: relative;
  line-height: 1.8;
  font-size: 16px;
}

/* 使用::before在段落前插入装饰符号 */
.decorate p::before {
  content: "“";
  color: #ccc;
  font-size: 40px;
  margin-right: 4px;
}

/* 使用:first-letter装饰首字母 */
.decorate p:first-letter {
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  background: #3498db;
  float: left;
  line-height: 1;
  padding: 6px 10px;
  margin: 4px 8px 0 0;
  border-radius: 6px;
}

注意事项与兼容说明

在实际使用中，有几个点容易出错：

• :first-letter只能用于块级元素，如p、div、li等，对内联元素无效。
• 若使用float实现首字下沉，父元素需有足够高度或清除浮动，避免布局塌陷。
• ::before的content属性必须存在，哪怕只是空字符串，否则伪元素不会生成。

错误写法示例

下面这种写法不会生效，因为span是内联元素，:first-letter无法选中：

/* 错误：内联元素不支持:first-letter */
span:first-letter {
  font-size: 30px;
}

正确HTML结构

对应的HTML只需要普通段落，不需要额外包裹首字母：

<div class="decorate">
  <p>这是一个示例段落，首字母将被装饰为蓝色圆角块，前面还会有一个灰色引号。</p>
</div>

适用场景

这种纯CSS方案适合博客文章开头、产品简介卡片、引言区块等需要视觉引导的地方。相比用JavaScript或额外标签，它更轻量且易于维护。如果设计稿要求更复杂，例如首字母使用自定义字体图标，也可以在::before中通过content引入字体，再配合:first-letter调整位置。

总结：:first-letter负责修饰首个字母本身，::before负责在前面补充装饰内容，两者各司其职即可实现优雅的首字母效果。

CSSfirst-letterbefore修改时间：2026-07-28 04:42:20