CSS :after伪元素设置\a换行符搭配white-space:pre不生效求助

解决方案 #

你可以按下面的步骤排查修复：

1. 先给你的after伪元素补充display属性，行内元素默认无法通过换行符实现上下排列，修改后的代码参考如下：

.x-icon.tulsaphone:after {
content:"\a  TULSA \a SALES";
color:#fff;
white-space:pre;
font-size:8px;
font-family:arial;
font-weight:700;
/* 新增以下属性 */
display: block;
text-align: center;
}

2. 如果修改后还是不生效，检查两个常见异常点：

• 打开浏览器开发者工具，选中对应图标元素，查看after伪元素的计算样式，确认white-space: pre没有被其他更高优先级的CSS规则覆盖，如果被覆盖可以给该属性加!important测试效果
• 如果你使用了Sass、Less等CSS预处理器，或者站点主题有自动转义特殊字符的逻辑，把content中的\a替换为\\a，避免反斜杠被转义导致换行符失效

如果想要更稳定的上下排列效果，可以给父图标元素直接加flex布局，不用依赖换行符实现效果，兼容性更强：

.x-icon.tulsaphone {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

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