如何通过HTML属性向CSS content传递换行符实现箭头上下排列？

核心原因 #

你尝试的
/
换行符无效，是因为伪元素默认处于inline状态，且CSS不会自动解析属性值里的换行符，需要配合特定样式让换行生效，或者换用布局方式实现垂直排列。

可行实现方法 #

方法1：利用white-space解析属性中的换行符

在HTML的location-id属性中用
作为分隔符，然后通过CSS设置伪元素的white-space属性保留换行：

<div class="loc" location-id="▶&#xA;▶&#xA;▶">目标内容</div>

.loc::before {
  content: attr(location-id);
  /* 保留换行符并自动换行 */
  white-space: pre-wrap;
  /* 让换行生效，需设置为块级或行内块级 */
  display: inline-block;
  /* 可选：调整箭头行高控制间距 */
  line-height: 1.2;
  margin-right: 8px;
}

white-space: pre或pre-line也能实现，区别在于pre-wrap会自动换行超出容器的内容，pre严格保留格式，pre-line会合并空格但保留换行。

方法2：直接在CSS中用\A定义换行

如果不想修改HTML属性，可直接在CSS的content中用\A表示换行符，同样配合white-space：

.loc::before {
  content: "▶\A▶\A▶";
  white-space: pre-wrap;
  display: inline-block;
  line-height: 1.2;
  margin-right: 8px;
}

方法3：用Flex布局实现垂直排列

如果location-id属性中的字符是连续或空格分隔的，可通过Flex垂直布局直接排列，无需换行符：

<div class="loc" location-id="▶▶▶">目标内容</div>

.loc::before {
  content: attr(location-id);
  display: flex;
  flex-direction: column;
  /* 可选：设置箭头之间的固定间距 */
  gap: 3px;
  margin-right: 8px;
}

如果属性里是空格分隔的"▶ ▶ ▶"，可以用content: replace(attr(location-id), " ", "")先去掉空格（注意replace是CSS4特性，兼容性需验证），或者直接修改属性去掉空格。

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