Как убрать только подчеркивание с: 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>

Развернуть фрагмент

— OptimusCrime
источник

Ну, вам, очевидно, нужен список ... Используйте элемент 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 за обходной путь, который побудил меня проверить спецификации и убедиться, что обходной путь законен.}

— Phrogz
источник

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>

— LeJared
источник

Если бы в 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, если принятый ответ предполагает то же самое, но в другой форме ...

— Элен

-4

использовать это

#test  p:before {
    color: #B2B2B2;
    content: "► ";

}

— Бипин Чандра Трипати
источник

ничего не делает. текстовое оформление игнорируется.

— OptimusCrime