如何让伪元素与父<a>标签始终同行且避免继承下划线？

现有链接代码：

<a href="#">Laboris chuck pastrami ribeye nisi</a>

通过伪元素添加箭头：

a::after {
    content: ">";
    margin-left: 7px;
    display: inline-block;
}

目前遇到两个问题：

• 使用display: inline-block时，箭头会单独换行，无法和最后一个单词绑定
• 移除display: inline-block后，箭头虽能随最后单词换行，但会继承父元素的下划线，不符合需求

期望效果：箭头始终与链接最后一个单词绑定换行，且箭头无下划线。

方案1：覆盖伪元素的下划线样式 #

保持伪元素为inline（避免单独换行），同时给伪元素设置text-decoration: none，直接覆盖父元素的下划线继承：

a {
  text-decoration: underline;
}
a::after {
  content: ">";
  margin-left: 7px;
  display: inline;
  text-decoration: none; /* 取消箭头的下划线 */
}

该方案无需修改HTML结构，兼容性好，是最直接的解决方式。

方案2：用border-bottom模拟链接下划线 #

把原链接的下划线替换为border-bottom（border不会像text-decoration那样被伪元素继承），伪元素保持inline即可：

a {
  text-decoration: none; /* 去掉默认下划线 */
  border-bottom: 1px solid currentColor; /* 用border模拟下划线 */
}
a::after {
  content: ">";
  margin-left: 7px;
  display: inline;
}

该方案适合需要自定义下划线样式（比如粗细、颜色）的场景，同时天然避免伪元素继承下划线的问题。

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