У меня есть набор стилизованных ссылок, в которых используется :before
стрелка.
Это выглядит хорошо во всех браузерах, но когда я применяю подчеркивание к ссылке, я не хочу, чтобы на :before
части (стрелка) было подчеркивание .
См., Например, jsfiddle: http://jsfiddle.net/r42e5/1/
Можно ли это удалить? Стиль тестирования, в котором я сидел, #test p a:hover:before
действительно применяется (согласно Firebug), но подчеркивание все еще присутствует.
Есть ли способ избежать этого?
#test {
color: #B2B2B2;
}
#test p a {
color: #B2B2B2;
text-decoration: none;
}
#test p a:hover {
text-decoration: underline;
}
#test p a:before {
color: #B2B2B2;
content: "► ";
text-decoration: none;
}
#test p a:hover:before {
text-decoration: none;
}
<div id="test">
<p><a href="#">A link</a></p>
<p><a href="#">Another link</a></p>
</div>
html
css
hyperlink
pseudo-element
text-decorations
OptimusCrime
источник
источник
Ответы:
Да, если вы измените стиль отображения встроенного элемента с
display:inline
(по умолчанию) наdisplay:inline-block
:#test p a:before { color: #B2B2B2; content: "► "; display:inline-block; }
Это потому, что спецификации CSS говорят :
(Акцент мой.)
Демо: http://jsfiddle.net/r42e5/10/
Спасибо @Oriol за обходной путь, который побудил меня проверить спецификации и убедиться, что обходной путь законен.
источник
text-decoration:underline
примененный к родительскому элементу с помощьюdisplay:inline-block
. См. Пример: jsfiddle.net/aZdhN/1 . Тогда проблема автора может быть решена следующим образом: stackoverflow.com/a/17347068/1529630В IE8-11 есть ошибка , поэтому использование в
display:inline-block;
одиночку там не работает.Я нашел решение этой ошибки, явно установив
text-decoration:underline;
для: before-content, а затем снова перезаписав это правило с помощьюtext-decoration:none;
a {text-decoration:none;} a:hover {text-decoration:underline;} a:before {content:'>\a0'; text-decoration:underline; display:inline-block;} a:before, a:hover:before {text-decoration:none;}
Рабочий пример здесь: http://jsfiddle.net/95C2M/
Обновление: поскольку jsfiddle больше не работает с IE8, просто вставьте этот простой демонстрационный код в локальный файл html и откройте его в IE8:
<!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> a {text-decoration:none;} a:hover {text-decoration:underline;} a:before {content:'>\a0'; text-decoration:underline; display:inline-block;} a:before, a:hover:before {text-decoration:none;} </style> </head> <body> <a href="#">Testlink</a> With no Underline on hover under before-content </body> </html>
источник
<img style="text-decoration:underline">
внутри (и это был ключ)<a style="padding:0; border:none;">
Вы можете сделать это, добавив к
:before
элементу следующее:display: inline-block; white-space: pre-wrap;
С
display: inline-block
подчеркиванием исчезает. Но тогда проблема в том, что пространство после треугольника схлопывается и не отображается. Чтобы исправить это, вы можете использоватьwhite-space: pre-wrap
илиwhite-space: pre
.Демо : http://jsfiddle.net/r42e5/9/
источник
pre-wrap
подсказку. Я использовалcontent:'►\a0'
(\ a0 = & nbsp;)Оберните ваши ссылки в промежутки и добавьте текстовое оформление в промежуток на a: hover следующим образом:
a:hover span { text-decoration:underline; }
Я обновил вашу скрипку до того, что, как мне кажется, вы пытаетесь сделать. http://jsfiddle.net/r42e5/4/
источник
попробуйте вместо этого использовать:
#test p:before { color: #B2B2B2; content: "► "; text-decoration: none; }
это будет делать?
источник
использовать это
#test p:before { color: #B2B2B2; content: "► "; }
источник