移除Font Awesome图标下划线并使图标与最后单词同行

方法一：直接修改CSS（无需额外HTML结构） #

通过给伪元素单独设置text-decoration: none移除下划线，同时保持display: inline确保图标与最后一个单词同换行，避免分离：

a.external-link {
  text-decoration: underline; /* 保留文本的下划线 */
}
a.external-link::after {
  font-family: 'Font Awesome 5 Pro';
  content: 'a-a';
  background-color: white;
  font-weight: 400;
  margin-left: 4px;
  font-size: 10px;
  display: inline;
  text-decoration: none; /* 移除图标下方的下划线 */
}

HTML保持原结构即可：

<a href="http://google.com" class="external-link">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod d</a>

方法二：拆分文本与图标（兼容性更优） #

用<span>包裹链接文本，只为文本添加下划线，图标部分不添加下划线，同时保持inline状态避免换行分离：

a.external-link {
  text-decoration: none; /* 去掉a标签整体下划线 */
}
a.external-link span {
  text-decoration: underline; /* 仅为文本添加下划线 */
}
a.external-link::after {
  font-family: 'Font Awesome 5 Pro';
  content: 'a-a';
  background-color: white;
  font-weight: 400;
  margin-left: 4px;
  font-size: 10px;
  display: inline;
}

HTML调整为：

<a href="http://google.com" class="external-link"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod d</span></a>

说明 #

• 方法一利用CSS样式可覆盖的特性，直接针对伪元素移除下划线，display: inline保证图标与文本始终在同一换行，不会像inline-block那样被单独拆分。
• 方法二通过结构拆分精准控制下划线范围，兼容性更强，适合需兼容老旧浏览器的场景。

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