如何用HTML/CSS在文本每一行开头重复添加引号？

当然可以用HTML和CSS实现这种复古排版效果，下面是具体的实现方案，完全适配文本换行（包括小屏幕适配）的场景：

1. 语义化HTML结构 #

使用标准的<blockquote>标签包裹引用内容，既符合语义规范，也便于样式控制：

<blockquote class="vintage-quote">
  这是一段需要展示复古排版效果的长引用内容，当内容因宽度限制换行时，每一行的左侧都会自动出现引号。在20世纪之前的老式排版中，这种样式十分常见——引号不仅出现在引用的首尾，每一行开头也会重复显示，让整体排版更具复古质感。
</blockquote>

2. 核心CSS样式 #

通过伪元素和行内排版特性实现自动换行时的引号跟随：

.vintage-quote {
  font-family: "Georgia", serif; /* 选用衬线字体贴合复古风格 */
  font-size: 1.2rem;
  line-height: 1.8;
  margin: 1.5rem 0;
  padding-left: 2rem; /* 为左侧引号预留空间 */
  position: relative;
}

.vintage-quote::before {
  content: "“"; /* 自定义引号符号，可替换为其他复古样式如「、»等 */
  display: inline-block;
  width: 1.2rem;
  margin-left: -1.2rem; /* 偏移到预留的左侧空间 */
  font-size: 1.6rem;
  color: #555;
  font-weight: bold;
}

实现原理说明 #

• 利用::before伪元素生成引号，设置为inline-block后，它会跟随文本行自然流动，当文本换行时，引号自动出现在新行的开头。
• padding-left与负margin-left的配合，确保引号占据独立的左侧空间，不会挤压正文内容，同时保持每行引号对齐。
• 完全适配响应式场景：无论屏幕宽度如何变化，文本换行时引号都会自动跟随到新行左侧，无需额外的JS控制。

如果需要调整引号样式，只修改content属性的符号即可，比如替换为法语式的»或者中文的「」。

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