Стоп ссылка: до того, как контент будет подчеркнут правилом, применяемым к ссылке

У меня есть текстовая ссылка, которая подчеркивается при наведении курсора. Я добавляю в начале ссылки символ >, используя следующий код:

.box.blueb a { color: #0098aa; }
.box.blueb a:hover { text-decoration: underline; }
.box.blueb a:before { content: "> "; }
.box.blueb a:before:hover { text-decoration: none; }

Но я не хочу, чтобы символ > подчеркивался, когда ссылка зависает. Как достичь этого?

Ответы

Ответ 1

http://jsfiddle.net/thirtydot/LmvgM/1/

Вам нужно обернуть span вокруг текста внутри a:

<div class="box blueb">
    <a href="#"><span>Hello</span></a>
</div>

И затем измените свой CSS на это:

.box.blueb a { color: #0098aa; text-decoration: none; }
.box.blueb a:hover > span { text-decoration: underline; }
.box.blueb a:before { content: "> "; }

.box.blueb a:before:hover { text-decoration: none; } не работает, потому что, когда вы устанавливаете text-decoration: underline для элемента (a), вы не можете его удалить на потомок (:before).

Ответ 2

http://jsfiddle.net/LmvgM/8/

Это может быть достигнуто только с помощью css без дополнительной разметки html, установив позицию: по отношению к ссылке и соответственно положению: абсолютное значение: до содержимого.

Используя этот пример...

<div class="box blueb">
    <a href="#">Hello</a>
</div>

... css будет выглядеть так:

.box.blueb a { 
    color: #0098aa; 
    position: relative;
    margin-left: 5px;
    padding-left: 10px;
    text-decoration: none;
}

.box.blueb a:before { 
    content: "> "; 
    position: absolute;
    top: 0;
    left: 0;
}

.box.blueb a:hover {
    text-decoration: underline;
}

Ответ 3

Вы можете сделать это, только добавив display: inline-block к элементу :before:

.box.blueb a { color: #0098aa; }
.box.blueb a:hover { text-decoration: underline; }
.box.blueb a:before { content: "> "; display:inline-block; }

Демо: http://jsfiddle.net/CaNyx/

Edit

Проблема заключается в том, что с display: inline-block пространство не отображается, но вы можете исправить его с помощью white-space: pre или white-space: pre-wrap

Демо: http://jsfiddle.net/CaNyx/1/

Ответ 4

Попробуйте это, если вы хотите использовать только CSS-решение. Чтобы он работал в IE, вам нужно явно включить его, прежде чем отключать его для псевдоэлементов:

a {text-decoration:none;}
a:hover {text-decoration:underline;}
a:before { text-decoration:underline;}
a:before,
a:hover:before {text-decoration:none;}

Итак, в вашем примере вам нужно будет написать:

.box.blueb a { text-decoration:none; }
.box.blueb a:hover { text-decoration: underline; }
.box.blueb a:before { text-decoration: underline; }
.box.blueb a:before,
.box.blueb a:before:hover { text-decoration: none; }

Ответ 6

Я знаю, что это не отвечает, как остановить привязку до того, как содержимое будет подчеркнуто.
Но лучшая работа, которую я нахожу, когда мне нужно это поведение, не используется a:before.

HTML: 

<nav class="breadcrumb">
    <span><a href="#">Test 1</a></span>
    <span><a href="#">Test 2</a></span>
    <span><a href="#">Test 3</a></span>
</nav>

CSS: 

nav.breadcrumb > span:before             { content: "> "; }
nav.breadcrumb > span:first-child:before { content: "";   }

Итак, указав :before псевдокласс для элемента, который обертывает якорь, вместо самого якоря кажется лучшим решением на данный момент.

Другой пример, если вы предпочитаете использовать списки:

HTML: 

<ul class="breadcrumb">
    <li><a href="#">Test 1</a></li>
    <li><a href="#">Test 2</a></li>
    <li><a href="#">Test 3</a></li>
</ul>

CSS: 

ul.breadcrumb                         { margin: 0; padding: 0; }
ul.breadcrumb > li                    { display: inline;       }
ul.breadcrumb > li:before             { content: "> ";         }
ul.breadcrumb > li:first-child:before { content: "";           }