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

у меня есть набор стилизованных ссылок с помощью :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>
72
css html hyperlink pseudo-element text-decorations

6 ответов

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

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

130

есть ошибка в 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-файл и откройте его в ИЕ8:

<!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>
47

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

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

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

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

5

оберните ссылки в промежутки и добавьте текстовое оформление в промежуток на a: наведите курсор вот так,

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

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

1

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

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

это подойдет?

-1

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

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

}
-4