如何避免CSS中::after伪元素内容换行显示？

嘿，我来帮你搞定这个逗号换行的麻烦事儿～你遇到的问题根源其实出在给::after伪元素设置了display: inline-block，咱们一步步拆解和解决：

问题原因 #

inline-block会让伪元素变成行内块级元素，它和前面的<a>标签之间的空白（比如你代码里<a>之间的换行、空格）会被浏览器解析成实际的空格。当容器宽度不够时，这些额外的空白加上伪元素的逗号内容，就很容易被挤到下一行，出现你说的Foo, Baz , Bar这种换行的情况。而且inline-block本身也会自带一些布局间距，进一步加剧这个问题。

解决方案 #

方案1：去掉伪元素的display: inline-block（最简便） #

默认情况下，::after伪元素对于content生成的文本来说，inline类型就足够了，完全不需要改成inline-block。同时我们还要处理最后一个链接后面多余的逗号：

/* 给每个a标签后面添加逗号和不换行空格 */
a:after { 
  content: ', \00a0'; 
  text-decoration: none; 
}
/* 去掉最后一个a标签的伪元素内容 */
a:last-of-type:after {
  content: '';
}

对应的HTML保持原样就行：

<a href="foo.com">Foo</a> <a href="bar.com">Bar</a> <a href="baz.com">Baz</a>

方案2：如果必须用inline-block（比如要加其他样式） #

如果因为某些需求必须给伪元素或<a>标签设置inline-block，那我们需要消除行内块元素之间的空白：

方法A：去掉HTML里的空白

把<a>标签连在一起写，去掉它们之间的换行和空格：

<a href="foo.com">Foo</a><a href="bar.com">Bar</a><a href="baz.com">Baz</a>

方法B：用父元素消除空白

给父容器设置font-size: 0，然后在<a>标签上重新设置字体大小，这样就能消除元素间的空白：

.name-list {
  font-size: 0; /* 消除子元素间的空白 */
}
.name-list a {
  font-size: 16px; /* 还原正常字体大小，根据你的需求调整 */
}
.name-list a:after {
  content: ', \00a0';
  font-size: 16px; /* 伪元素也要还原字体大小 */
  display: inline-block;
}
.name-list a:last-of-type:after {
  content: ''; /* 去掉最后一个逗号 */
}

对应的HTML需要给父元素加类：

<div class="name-list">
  <a href="foo.com">Foo</a> <a href="bar.com">Bar</a> <a href="baz.com">Baz</a>
</div>

这样调整后，逗号就会乖乖和链接保持在同一行啦～

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