Остановить ссылки: до того, как содержание будет подчеркнуто правилом, примененным к ссылке - PullRequest
Новая
       48

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

18 голосов
/ 16 декабря 2011

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

.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; }

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

Ответы [ 6 ]

12 голосов
/ 16 декабря 2011

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).

10 голосов
/ 27 марта 2013

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

Вы можете сделать это только добавив 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/

Редактировать

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

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

5 голосов
/ 10 июля 2015

Попробуйте, если хотите использовать решение только для 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; }
0 голосов
/ 05 апреля 2014

Я знаю, что это не ответ на вопрос, как остановить привязку якоря до того, как контент будет подчеркнут.
Но лучший способ обойти это, когда мне нужно это поведение, это не использовать 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: "";           }
0 голосов
/ 16 декабря 2013

Этот вопрос также задавали по адресу : hover: до оформления текста никто не имел никаких эффектов? и ответ https://stackoverflow.com/a/13376725/261747 работал и у меня в IE тоже.

...