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

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

Ответы

Ответ 1

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

Да, если вы измените стиль отображения встроенного элемента с 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

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

Ответ 3

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

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

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

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

Ответ 4

Оберните свои ссылки в промежутках и добавьте текст-украшение в диапазон на a: hover, подобный этому,

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

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

Ответ 5

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

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

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

Ответ 6

используйте этот

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

}