如何正确使用CSS伪类::before/::after且不影响文本位置 解决引号显示异常问题

你遇到的问题本质是大号引号默认会参与文本流排版：

• 设置display: block时，引号作为块级元素单独占一行，自然位置过高
• 不设置时作为行内元素插入到第一行开头，挤压第一行文本，导致各行缩进不一致

实现方案 #

采用绝对定位将引号移出文本流，既不会挤压诗句，也可以自由调整位置，同时给列表容器设置统一左侧缩进保证所有诗句对齐。

完整代码 #

HTML（补充外层列表容器）

<ul class="verse-list">
  <li class = "incipit">This is the first verse</li>
  <li>This is the second verse</li>
  <li>This is the third verse</li>
  <li class = "explicit">This is the last verse</li>
</ul>

调整后CSS

/* 列表容器统一设置，保证所有诗句均等缩进 */
.verse-list {
  position: relative;
  padding-left: 1.2rem; /* 可按需调整缩进大小 */
  list-style: none; /* 不需要去掉默认列表圆点可删除该行 */
  margin: 0;
}

.incipit::before{
  content: '“';
  color: #B42B51;
  font-size: 4rem;
  position: absolute;
  top: -1.2rem; /* 可按需调整上下位置，对齐第一行上方 */
  left: -1.5rem; /* 可按需调整左右位置，放到缩进的左侧区域 */
}

.explicit::after{
  content: '„';
  font-size: 4rem;
  color: #B42B51;
  position: absolute;
  bottom: -2rem; /* 可按需调整后引号上下位置 */
  right: 0; /* 可按需调整后引号左右位置 */
}

上述代码里的位置数值可以根据你实际使用的字体、行高做微调用到最优效果，该方案下引号完全不参与文本流，不会影响任何诗句的排版缩进，所有行的缩进由.verse-list的padding-left统一控制，完全符合预期效果。

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