Как сделать пунктирную линию ссылки на зависание?

Question

У меня есть ссылка <a class="link-articles" href="#articles">My Articles</a>

и мой CSS .link-articles { text-decoration: underline; color: blue; }

Однако, по наведению Я хотел бы иметь вместо синего подчеркнуты красным подчеркиванием, а текст должен оставаться синим, и только изменение подчеркивание цвет красный ,

Как это сделать?

Answer 1

Поскольку вы не можете обозначить какой цвет второй цвет для текста подчеркиванием, одна стратегия, чтобы удалить его и использовать границу.

.link-articles 
{ 
    border-bottom: solid 1px blue; 
    text-decoration: none; 
} 

.link-articles:hover 
{ 
    border-bottom-color: red; 
} 

Обратите внимание, что если вы оставите text-underline, он будет смещаться вниз при наведении курсора мыши, так как это помещение не точно так же, как местоположение нижней границы.

Этот подход имеет дополнительное преимущество, будучи в состоянии позиции подчеркивание с помощью line-height и имеют стили альтернативной линии, путем замены solid с dotted или dashed.

Borderless подход:

Как @Pacerier указывает в комментариях, здесь альтернативную стратегию, используя псевдо-классы и содержание CSS (JSFiddle):

.link-articles 
{ 
    position: relative; 
} 

.link-articles[href="#articles"]:after 
{ 
    content: 'My Articles'; 
} 

.link-articles:after 
{ 
    color: red; 
    left: 0; 
    position: absolute; 
    top: 0; 
} 

Однако, с анти aliasing, он может иметь некоторое цветовое смешение на краях текста. Если вам не нравится мысль вручную положить content в свой CSS, вы можете использовать атрибут или дублирующий элемент.

Answer 2

Используйте границу:

.link-articles { text-decoration: none; border-bottom: blue 1px solid; } 
.link-articles:hover { border-bottom: red 1px dotted; } 

Answer 3

Используйте border-bottom:

a:hover.link-articles {border-bottom: 1px dotted red; text-decoration: none;} 

See the demo

Answer 4

Попробуйте это:

.link-articles{ text-decoration: none; border-bottom:1px dotted; border-color:blue; } 
.link-articles:hover{ border-color:red; } 

DEMO

Answer 5

Стиль :hover используется для установки стиля, когда пользователь накладывает мышь на элемент.

.link-articles  { ... } 
.link-articles:hover { ... } 

И вы можете использовать border-bottom свойство вместо text-decoration для пунктирной, штриховой и шириной укладки.

Answer 6

Показать нижнюю границу на парении:

a.link-articles { 
    text-decoration: none; 
    border-bottom: 1px dotted blue; 
} 
a.link-articles:hover { 
    border-bottom: 1px dotted red; 
} 

Answer 7

Demo Fiddle

.link-articles { text-decoration: none; border-bottom: 1px dotted blue; } 
.link-articles:hover { text-decoration: none; border-bottom: 1px dotted red; } 

Answer 8

Вы можете использовать свойство CSS3 text-decoration-color, но несчастливо, то text-decoration-color свойство не поддерживается ни в одном из основных браузеров.

Firefox поддерживает альтернативу, -moz-text-decoration-color.

Ссылка: http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp

Поддержка браузеров: http://caniuse.com/#search=text-decoration-color

JSFiddle (не работает на всех браузерах)

Так что лучший способ сделать это по-прежнему использовать свойство border-bottom CSS в виде трюк.