При использовании :after убрать подчеркивание у последнего элемента в ссылке

@ТабуретY · Регистрация: 05.12.2013

Author24 — интернет-сервис помощи студентам

Здравствуйте! При использовании псевдоэлемента :after свойство text-decoration: none; не работает, color работает... Помогите исправить.

@evgeniyd · 29.07.2016, 00:21

А если просто задать всем ссылкам?

CSS

1
2
3

a {
 text-decoration: none;
}

@ТабуретY · 29.07.2016, 00:25 **[ТС]**

нет. нужно у одной ссылки убрать

@evgeniyd · 29.07.2016, 00:34

Скиньте весь код.

@mrtoxas · 29.07.2016, 00:41

Псевдоэлементы не могут никак влиять на свои элементы. Они могут быть только до или после элемента. Поэтому, если вы выводите какой-то текст через псевдоелементы до\после ссылки, то его подчеркивание просто будет продолжаться до границы элемента,. Другими словами. Это подчеркивается не псевдоэлемент, а сама ссылка. И сделать с этим ничего не получится. Но, всевдоэлементы могут менять сами себя, поэтому и работает color. Как-то так

@ТабуретY · 29.07.2016, 00:45 **[ТС]**

HTML-код:

HTML5

1	<li><a href="http://maps.yandex.ru" target="_blank">Яндекс.Почта</a></li>

CSS-стили:

CSS

1
2
3

a[target^="_blank"]:after{
  content: " ⇱"; 
}

https://jsfiddle.net/ke2n2q1f/

Добавлено через 2 минуты
можно как-нибудь убрать подчеркивание, а потом вернуть для текста ссылки, только я не соображу как

@mrtoxas · 29.07.2016, 00:52

Попробуйте изменить цвет элемента через псевдоэлемент.

Добавлено через 6 минут

CSS

a:after{
 content:' plus';
 color:red;
}

HTML5

1	<a href="#">link</a>

В данном примере красным станет только слово "plus", т.к., повторюсь, псевдоэлемент не имеет доступа к элементу. Поэтому убрать подчеркивание ему неподвластно.

@ТабуретY · 29.07.2016, 00:54 **[ТС]**

mrtoxas, я уже осознал, спасибо

@mrtoxas · 29.07.2016, 00:56

Можно выкрутиться так:

HTML5

1	<a href="#"></a>

CSS

a{
  text-decoration:none;
}
 
a:before{
  content:'Plus ';  
}
 
a:after{
  content:'Link';  
  text-decoration:underline;  
}

@ТабуретY · 29.07.2016, 01:01 **[ТС]**

я решил, что проще будет span навесить и

CSS

1
2
3

a span{
  text-decoration: underline; 
}

@boilzzz · 29.07.2016, 06:17

ТабуретY, https://jsfiddle.net/boilzzz/ke2n2q1f/2/
Как вариант можно сделать так...

HTML5

1	<li><a href="http://maps.yandex.ru" target="_blank">Яндекс.Почта</a></li>

CSS

a[target^="_blank"]:after{
  content: " ⇱"; 
  position:absolute;
}

@ТабуретY 1291 / 908 / 479 Регистрация: 05.12.2013 Сообщений: 3,073
		1
	При использовании :after убрать подчеркивание у последнего элемента в ссылке 29.07.2016, 00:14. Показов 6544. Ответов 10 Метки нет (Все метки) Здравствуйте! При использовании псевдоэлемента :after свойство text-decoration: none; не работает, color работает... Помогите исправить. 0

@ТабуретY 1291 / 908 / 479 Регистрация: 05.12.2013 Сообщений: 3,073
	29.07.2016, 00:25 [ТС]	3
	нет. нужно у одной ссылки убрать 0

@evgeniyd 29 / 29 / 11 Регистрация: 10.05.2016 Сообщений: 111
	29.07.2016, 00:34	4
	Скиньте весь код. 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	29.07.2016, 00:41	5
	Псевдоэлементы не могут никак влиять на свои элементы. Они могут быть только до или после элемента. Поэтому, если вы выводите какой-то текст через псевдоелементы до\после ссылки, то его подчеркивание просто будет продолжаться до границы элемента,. Другими словами. Это подчеркивается не псевдоэлемент, а сама ссылка. И сделать с этим ничего не получится. Но, всевдоэлементы могут менять сами себя, поэтому и работает color. Как-то так 0

@ТабуретY 1291 / 908 / 479 Регистрация: 05.12.2013 Сообщений: 3,073
	29.07.2016, 00:54 [ТС]	8
	mrtoxas, я уже осознал, спасибо 0

При использовании :after убрать подчеркивание у последнего элемента в ссылке

Решение