Как очистить текстовое оформление: before в a.class css на hover? - PullRequest
Новая
       13

Как очистить текстовое оформление: before в a.class css на hover?

0 голосов
/ 01 апреля 2019

Я использую Font Awesome, чтобы поставить иконку перед моей гиперссылкой. У меня есть css для моей гиперссылки: 

a.cancel {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.71;
  letter-spacing: normal;
  color: #eb1700;
  text-transform: uppercase;
  text-decoration: none;
}

a.cancel:before {
  font-family: "Font Awesome 5 Pro"; 
  content: "\f057";
  padding: 0 4px 0px 0px;
  font-weight: 300;
}

a.cancel:hover {
  text-decoration: underline;
}

a.cancel:hover:before {
  text-decoration: none;
  color: blue;
}

К сожалению, текстовое украшение не удаляется под моим значком при наведении. Как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 01 апреля 2019

Я думаю, немного о вашем HTML здесь. Предполагая, что в вашем теге A нет дополнительного HTML-кода, краткий ответ таков: текстовое оформление нельзя применить только к части тега A с помощью CSS. Это относится ко всем тегам А или нет. : Тег hover срабатывает для тега A. : Before не является действительно отдельным элементом DOM. A: hover запускается независимо от того, находитесь ли вы над частью: before или обычной частью, если это имеет смысл.

Однако, если вы не возражаете, добавив немного дополнительного HTML-кода в тег A, подчеркивание может быть применено только к этому элементу: 

<a class="cancel" href="http://example.com"><i>http://example.com</i></a>

a.cancel:hover i {
  text-decoration: underline;
}

Выше будет сказано, что следует подчеркивать только во внутреннем теге, а не во всем теге A. Вы можете использовать любой встроенный тег, например, span и т. Д. Это может быть не то, что вы хотите, но без какого-либо разделения, вы не можете применять A: hover только к тексту, а не к: before , Это все один элемент DOM. Если вы проверите его в Chrome (и других), вы увидите :: before внутри контейнера A.

0 голосов
/ 01 апреля 2019

Есть много способов исправить это, но вот как я обычно поступаю:

Установите display: inline-block для ссылки, затем float: left для ее псевдоэлемента. 

a.cancel {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.71;
  letter-spacing: normal;
  color: #eb1700;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block; /* + */
}

a.cancel:before {
  font-family: "Font Awesome 5 Pro"; 
  content: "\f057";
  padding: 0 4px 0px 0px;
  font-weight: 300;
  float: left; /* + */
}

a.cancel:hover {
  text-decoration: underline;
}

a.cancel:hover:before {
  text-decoration: none; /* You can remove this line */
  color: blue;
}
<a href="#" class="cancel">hello</a>
...