Як видалити лише підкреслення з: before?

94

У мене є набір стилізованих посилань за :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. Зі списків ви отримуєте кулі (або диски, ...) безкоштовно ...

— Šime Vidas

Чому б у вашому випадку не використовувати список із спеціальними маркерами замість абзаців? В іншому випадку застосуйте до вмісту батьківський p, а не до себе.

— ЮС

Можливий дублікат stackoverflow.com/questions/8536015/…

— Oriol

171

Чи можна це видалити?

Так, якщо ви зміните стиль відображення елемента вбудовування з 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

52

У IE8-11 є помилка , тому використання display:inline-block;одного лише там не буде працювати.

Я знайшов рішення для цієї помилки, чітко встановивши text-decoration:underline;для: перед вмістом, а потім перезаписавши це правило знову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;">

— Bob Stein

На жаль, цей jsfiddle не може бути перевірений в IE8, оскільки jsfiddle не працює в IE8.

— користувач2867288

На жаль, я не зміг знайти жодного інструменту обміну кодами в Інтернеті, який досі працює з IE8. До відповіді, що додав код, додали код, який ви можете просто вставити у файл html та відкрити його локально в IE8.

— LeJared

Випробувано та затверджено на IE9, подія без двох різних станів.

— saeraphin

Був посилання з іконою в: раніше цього НЕ слід було підкреслювати в стані спокою, потім підкреслювати на наведення курсору, але не на іконку. Ось що мені потрібно було зробити, щоб переконати IE зробити це правильно: a {text-decoration: none} a: before {text-decoration: underline} a: before {text-decoration: none} (так, справді, перше підкреслення, потім перезаписати з жодним) a: наведіть {text-decration: підкреслити} a: hover: до {text-decoration: none}

— Fake Haak

7

Ви можете це зробити, додавши до :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: наведіть так,

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

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

— Вимені
джерело

Гарна ідея. Так я робив це раніше. Проблема полягає в тому, що це посилання виробляється в cms-системі, і наші клієнти заповнюють це як багатотекстовий текст.

— OptimusCrime

якою мовою є система управління вмістом? Чи зможете змусити його виплюнути посилання, а потім загорнути його в проміжок, перш ніж надсилати його в браузер?

— Вим'я

Компанія використовує modx. Я думаю, я міг би зробити це як останній вихід, але мені дуже хотілося це скасувати. Думаю, це неможливо. Спасибі все одно.

— OptimusCrime

-1

спробуйте використовувати замість цього:

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

це буде робити?

— Елен
джерело

У моєму div є абзаци may, так що це не буде працювати. Хороша ідея Тхо.

— OptimusCrime

цікаво, хто поставив -1, якщо прийнята відповідь пропонує те саме, але в іншій формі ...

— Елен

-4

використовуй це

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

}

— Біпін Чандра Трипаті
джерело

нічого не робить. текст-прикраса ігнорується.

— OptimusCrime