删除链接部分下划线

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

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

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