Удаление подчеркивания из части ссылки

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 из a span. Обратите внимание, что мне пришлось немного перенастроить ваш 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>

Answer 2

Измените псевдоэлемент :before, чтобы он отображался как inline-block:

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