如何避免:after伪元素与绑定的外部链接内容出现换行

问题根源 #

换行问题的核心原因是 <figcaption> 属于块级元素，默认会占据父容器100%宽度，所以加在 <a> 标签末尾的伪元素会被块级元素挤到新行显示。

修复方案 #

可以任选以下任意一种方式修复：

• 方案1：修改figcaption的显示模式
  给figcaption元素新增display属性，让它变为行内块级元素，不会独占整行：

figcaption.img-caption {
  display: inline-block;
}

如果需要保持文字居中效果，可以额外给父级a标签添加 text-align: center 属性。

• 方案2：调整伪元素的挂载对象
  把:after伪元素的挂载目标从a标签改为figcaption标签，直接跟在文字内容后面：

a:not([href*="domain"]) figcaption::after {
  /* 原有伪元素样式保持不变 */
  content: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%3E%3Cpath%20d%3D%22M4.5%203.5h-4v6h6v-4%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%2F%3E%3Cpath%20d%3D%22M4.5.5h5v5L9%206%207.5%204.5l-3%203-2-2%203-3L4%201z%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%20stroke-width%3D%221.001%22%2F%3E%3C%2Fsvg%3E);
  position: relative;
  top: -3px;
  margin: 0 1px 0 3px;
}

• 方案3（更可控的优化写法）：将svg从content改为背景图，避免content插入的替换元素出现行高适配问题：

a:not([href*="domain"])::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 11px;
  position: relative;
  top: -3px;
  margin: 0 1px 0 3px;
  background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2211%22%20viewBox%3D%220%200%2010%2011%22%3E%3Cpath%20d%3D%22M4.5%203.5h-4v6h6v-4%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%2F%3E%3Cpath%20d%3D%22M4.5.5h5v5L9%206%207.5%204.5l-3%203-2-2%203-3L4%201z%22%20fill%3D%22transparent%22%20stroke%3D%22%23ff5b5e%22%20stroke-width%3D%221.001%22%2F%3E%3C%2Fsvg%3E) no-repeat center;
  background-size: contain;
}

该写法后续调整图标大小、位置都更灵活，也不会出现意外换行问题。

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