Как убрать только подчеркивание с: before?


97

У меня есть набор стилизованных ссылок, в которых используется :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>


Ну, вам, очевидно, нужен список ... Используйте элемент UL вместо комбинации DIV / P. Со списками вы получаете пули (или диски, ...) бесплатно ...
Шиме Видас

Почему бы не использовать список с настраиваемыми маркерами вместо абзацев в вашем случае? В противном случае примените before-content к родительскому p, а не для связывания самого себя.
YuS

Возможный дубликат stackoverflow.com/questions/8536015/…
Oriol

Ответы:


177

Можно ли это удалить?

Да, если вы измените стиль отображения встроенного элемента с display:inline(по умолчанию) на display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

Это потому, что спецификации CSS говорят :

Когда он задан на встроенный элемент или распространяется на него, он влияет на все блоки, генерируемые этим элементом, и далее распространяется на любые блоки уровня входящего потока, которые разделяют встроенный элемент (см. Раздел 9.2.1.1). […] Для всех остальных элементов он распространяется на любые дочерние элементы в потоке. Обратите внимание, что текстовые украшения не распространяются на плавающие и абсолютно позиционированные потомки, а также на содержимое атомарных потомков на строчном уровне, таких как строковые блоки и встроенные таблицы .

(Акцент мой.)

Демо: http://jsfiddle.net/r42e5/10/

Спасибо @Oriol за обходной путь, который побудил меня проверить спецификации и убедиться, что обходной путь законен.


2
Вы можете переопределить text-decoration:underlineпримененный к родительскому элементу с помощью display:inline-block. См. Пример: jsfiddle.net/aZdhN/1 . Тогда проблема автора может быть решена следующим образом: stackoverflow.com/a/17347068/1529630
Oriol

3
Насколько я понимаю, в Internet Explorer это не работает (проверено 8-10). Есть идеи, как бороться с IE?
Линус Колдуэлл

Я нашел решение, которое работает и в IE8-11: stackoverflow.com/a/21902566/1607968
LeJared

53

В 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>

Если бы в IE8 подчеркивание гиперссылки на изображение могло быть отключено только <img style="text-decoration:underline">внутри (и это был ключ)<a style="padding:0; border:none;">
Боб Стейн,

К сожалению, этот jsfiddle нельзя проверить в IE8, потому что jsfiddle не работает в IE8.
user2867288

К сожалению, мне не удалось найти онлайн-инструмент для совместного использования кода, который все еще работает с IE8. Я добавил фрагмент кода в ответ выше, который вы можете просто вставить в html-файл и открыть его локально в IE8.
LeJared

Протестировано и одобрено в IE9, событие без двух разных состояний.
saeraphin

Была ссылка со значком в: раньше предполагалось, что НЕ должна подчеркиваться в состоянии покоя, а затем подчеркиваться при наведении курсора, но не значок. Вот что мне пришлось сделать, чтобы убедить IE сделать это правильно: a {text-decoration: none} a: before {text-decoration: underline} a: before {text-decoration: none} (да, действительно, первое подчеркивание, затем перезаписать без нуля) a: hover {text-decration: underline} a: hover: before {text-decoration: none}
Fake Haak

8

Вы можете сделать это, добавив к :beforeэлементу следующее:

display: inline-block;
white-space: pre-wrap;

С display: inline-blockподчеркиванием исчезает. Но тогда проблема в том, что пространство после треугольника схлопывается и не отображается. Чтобы исправить это, вы можете использовать white-space: pre-wrapили white-space: pre.

Демо : http://jsfiddle.net/r42e5/9/


1
+1 за pre-wrapподсказку. Я использовал content:'►\a0'(\ a0 = & nbsp;)
Hashbrown

1

Оберните ваши ссылки в промежутки и добавьте текстовое оформление в промежуток на a: hover следующим образом:

a:hover span {
   text-decoration:underline;
}

Я обновил вашу скрипку до того, что, как мне кажется, вы пытаетесь сделать. http://jsfiddle.net/r42e5/4/


Хорошая идея. Так я и делал раньше. Проблема в том, что эта ссылка создается в cms-системе, и наши клиенты сами заполняют ее как форматированный текст.
OptimusCrime

на каком языке CMS? Можно ли заставить его выплюнуть ссылку, а затем обернуть ее в диапазон перед отправкой в ​​браузер?
Вымя

Компания использует modx. Думаю, я мог бы сделать это в качестве последнего выхода, но я действительно хотел его аннулировать. Думаю, это невозможно. В любом случае спасибо.
OptimusCrime

-1

попробуйте вместо этого использовать:

#test p:before {
    color: #B2B2B2;
    content: "► ";
    text-decoration: none;
}

это будет делать?


В моем div есть несколько абзацев, так что это не сработает. Хорошая идея.
OptimusCrime

интересно, кто поставил -1, если принятый ответ предполагает то же самое, но в другой форме ...
Элен

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.