基于西班牙语语法的纯CSS对话引号格式实现咨询

嘿，完全可以用纯CSS搞定大部分需求！不过有个小坑得提前说：如果你的叙述文本（比如例子里的"he said"）是没被任何HTML标签包裹的纯文本节点，CSS没法直接给它加前后的破折号——毕竟CSS只能操作HTML元素，碰不到纯文本节点。但咱们可以用一些技巧尽量接近目标效果，或者如果能接受一点点妥协，依然能还原你要的西班牙语对话格式。

核心实现代码（处理对话内容的破折号） #

先搞定对话内容的格式，这部分纯CSS可以完美实现：

/* 移除浏览器默认给<q>加的引号样式 */
q {
  quotes: none;
}

/* 第一个对话内容前添加无空格的长破折号 — */
p q:first-of-type::before {
  content: "—";
}

/* 第一个对话内容后加空格+长破折号，衔接后面的叙述文本 */
p q:first-of-type::after {
  content: " —";
}

/* （可选）如果第二个对话也需要符合西班牙语格式，给它前面加破折号 */
p q:last-of-type::before {
  content: "—";
}

关于叙述文本的破折号问题 #

如果要把"he said"变成—he said—，因为它是纯文本节点，纯CSS没法直接操作它。不过如果你的叙述文本内容是固定不变的，咱们可以用个小hack：

/* 仅当叙述文本固定为"he said."时可用，不通用 */
p {
  position: relative;
  /* 假设背景是白色，用来覆盖原有文本 */
  background-color: #fff;
}

p::after {
  content: "—he said—. ";
  position: absolute;
  /* 这里需要手动调整left值，对应第一个<q>的宽度+空格，很不灵活 */
  left: 80px;
  top: 0;
}

/* 隐藏原有叙述文本 */
p {
  overflow: hidden;
  text-indent: -80px;
  padding-left: 80px;
}

但这个方案非常不通用，因为没法动态获取第一个<q>的宽度，只能手动调整，内容一变就失效。

如果能允许极微小的HTML修改（比如把叙述文本放进<span class="narrative">），那就能完美实现完整格式，代码如下：

q {
  quotes: none;
}

p q:first-of-type::before {
  content: "—";
}

p q:first-of-type::after {
  content: " ";
}

/* 给叙述文本前后加破折号 */
.narrative::before {
  content: "—";
}
.narrative::after {
  content: "—";
}

p q:last-of-type::before {
  content: "—";
}

总结 #

纯CSS可以完美实现西班牙语对话格式的核心部分（对话内容的破折号包裹）；但叙述文本的前后破折号处理，要么依赖HTML结构配合，要么只能用不通用的静态hack方案。如果完全不能修改HTML，建议优先实现对话内容的格式，叙述部分的破折号可以根据实际需求权衡是否使用hack。

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