如何为问号、感叹号这类非字母字符实现首字下沉（Drop Cap）效果？

你可以通过调整::before伪元素的浮动、行高和边距属性，让大号符号嵌入段落实现首字下沉效果，而非单纯放大。以下是可行方案：

核心CSS代码 #

.question::before {
  content: '?';
  font-size: 3em;
  font-weight: 800;
  /* 关键：让符号左浮动，实现文字环绕 */
  float: left;
  /* 匹配段落行高，让符号垂直对齐 */
  line-height: 0.8;
  /* 控制符号与文字的间距 */
  margin-right: 8px;
  margin-top: 4px;
}

.answer::before {
  content: '!';
  font-size: 3em;
  font-weight: 800;
  float: left;
  line-height: 0.8;
  margin-right: 8px;
  margin-top: 4px;
}

效果说明 #

• float: left：让符号向左浮动，段落文字自动环绕在符号右侧，模拟首字下沉的排版逻辑。
• line-height: 0.8：调整符号行高，使其高度适配段落多行文字，避免符号与正文排版脱节。
• margin属性：微调符号与后续文字的间距，让整体排版更自然协调。

对应HTML结构 #

<div class="question">我博客的问答页面里，想给问题开头加个大号问号、答案开头加大号感叹号，实现首字下沉效果。本来用`::first-letter`和`initial-letter`很容易实现，但问号和感叹号不算字母，这俩方法没用。我临时用了`::before`伪类，只能放大符号，没法做首字下沉，有没有办法让符号嵌入段落里，而不是单纯放大？</div>

<div class="answer">当然可以！通过给伪元素设置浮动和行高属性，就能让符号像首字一样嵌入段落，实现你想要的首字下沉效果。根据段落字体大小调整数值，还能适配不同页面样式。</div>

如果需要更精准的排版控制，可结合position: relative微调符号垂直位置，或根据正文字体大小动态调整font-size和line-height的数值。

内容的提问来源于stack exchange，提问作者ChaosHead