从链接的一部分中删除下划线

Question

我有一些超链接，链接前面有内容，就像图片中的样子。

这是我正在使用的代码。

a {


font-size: 14px;
  text-decoration: none;
  color: $grey;
  font-weight: bold;
  text-decoration: underline;
  &:hover {
    cursor: pointer;
  }

  &:before {
    content: '\1F847';
    color: $green;
    padding-right: 8px;
    text-decoration: none;
  }

  &:after {
    text-decoration: none;
  }
}

我需要保留箭头作为内容，但不希望它有下划线的文本装饰。如您所见，我尝试在之前和之后添加text-underline:none，但并没有起作用。如果需要，我可以使用 JS/Query，但仍然不知道如何解决这个问题。

- Bojan Kolano

---

你能分享一下 jsfiddle 的链接吗？ - Niraj Kaushal

你的代码在哪里？ - Bhargav Chudasama

https://jsfiddle.net/p2hjgomf/#&togetherjs=Fv7gAcsFAn - Bojan Kolano

第一次使用这个fiddle..希望现在能理解。 - Bojan Kolano

Answer 1

更改:before伪元素，使其显示为inline-block：

  &:before {
    content: '\1F847';
    color: $green;
    padding-right: 8px;
    text-decoration: none;
    display: inline-block;
  }

- user10058046

---

我不知道为什么它有效，但它解决了我的问题！谢谢！ - Bojan Kolano

这是为什么它起作用的原因：https://www.w3.org/TR/CSS21/text.html#propdef-text-decoration 简而言之，text-decoration 将传播到 :before 和 :after 这样的元素，但不会作用于任何 inline-block 元素。 - user10058046

Answer 2

您可以将a应用text-decoration: none，但在其中插入一个包含链接文本的，然后在a span中放置text-decoration: underline。请注意，由于我们没有预处理器，因此我不得不稍微调整您的CSS。

a {
  font-size: 14px;
  text-decoration: none;
  color: grey;
  font-weight: bold;
  text-decoration: none;
  }
  
a span {
  text-decoration: underline;
  }
  
 a:hover {
    cursor: pointer;
  }

 a:before {
    content: '\1F847';
    color: green;
    padding-right: 8px;
    text-decoration: none;
  }

    <a href="#"><span>2015 Highlights</span></a>

- gavgrif

---

因为这是我考虑发布的另一种选择，所以给你一个赞。实际上，我内心更倾向于你的方法。 - user10058046

谢谢 @JᴀʏMᴇᴇ - 我也给你点赞了，因为我从中学到了一些东西 - 谢谢。 - gavgrif

谢谢建议！不错的主意 :) - Bojan Kolano

如果可能的话，我更喜欢避免使用伪元素。这样可以使代码更易于维护。这应该是被接受的答案。 - Jonas Praem

@JonasPraem 更易维护是主观的。如果OP问的是方法，我会同意这个答案被接受。但他特别询问的是已经存在的CSS目标标记。开发人员需要解决由某些第三方渲染的标记问题并不罕见。我也喜欢避免使用伪元素。对于任何“神奇”和隐藏的东西，我都不是很喜欢。 - user10058046