Как удалить только подчеркивание из: before? - PullRequest
Новая
       21

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

84 голосов
/ 11 января 2012

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

Ответы [ 6 ]

150 голосов
/ 11 января 2012

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

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

51 голосов
/ 20 февраля 2014

В 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>
7 голосов
/ 27 июня 2013

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

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

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

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

1 голос
/ 11 января 2012

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

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

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

0 голосов
/ 11 января 2012

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

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

}
0 голосов
/ 11 января 2012

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

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

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

...