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

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，但仍然不知道如何执行此操作。

Answer 1

您可以将text-decoration: none应用于a，但是将一个跨度插入其中，链接文本位于跨度内-然后将text-decoration: underline的{​​{1}}放入。请注意，由于我们没有预处理器，因此我不得不重新调整一下CSS。

a span

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;
  }

Answer 2

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

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