CODEWITHSUNDEEP
htmlcss
user2183716
user2183716

Reputation:

How to make a dotted underline link on hover?

I have a link <a class="link-articles" href="#articles">My Articles</a>

and my css .link-articles { text-decoration: underline; color: blue; }

However, on hover I would like to have instead of blue underline a red underline, but the text should remain blue and only the underscore change color to red.

How to do such thing?

Upvotes: 19

Views: 41639

Answers (9)

Joan
Joan

Reputation: 4300

Just do:

a:hover {
  text-decoration-style: dotted
}

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-style

Upvotes: 9

Adil Shaikh
Adil Shaikh

Reputation: 44740

Demo Fiddle 

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

Upvotes: 2

Anoop
Anoop

Reputation: 23208

Show bottom border on hover:

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

Upvotes: 1

jeffjenx
jeffjenx

Reputation: 17457

Since you cannot denote which color a second color for the text underline, one strategy is to remove it and use a border.

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

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

Note that if you leave the text-underline, it will shift down when hovering, since it's placement is not exactly the same location as the bottom border.

This approach has an added advantage of being able to position the underline by using line-height and have alternate line styles, by replacing solid with dotted or dashed.

Borderless Approach:

As @Pacerier points out in the comments, here is an alternate strategy using pseudo-classes and CSS content (JSFiddle):

.link-articles
{
    position: relative;
}

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

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

However, with anti-aliasing, it may have some color-blending on the text edges. If you don't like the thought of having to manually put content in your CSS, you could use an attribute or duplicate element.

Upvotes: 21

Magicprog.fr
Magicprog.fr

Reputation: 4100

You can use the CSS3 text-decoration-color property, but unfortunatly, the text-decoration-color property is not supported in any of the major browsers.

Firefox supports an alternative, the -moz-text-decoration-color property.

Reference: http://www.w3schools.com/cssref/css3_pr_text-decoration-color.asp

Browser Support: http://caniuse.com/#search=text-decoration-color

JSFiddle (Doesn't works on all browsers)

So the best way to do that is still to use the border-bottom css property as a trick.

Upvotes: 0

Linus Caldwell
Linus Caldwell

Reputation: 11058

Use a border:

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

Upvotes: 3

Rahul Tapali
Rahul Tapali

Reputation: 10137

Try this:

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

DEMO

Upvotes: 1

greener
greener

Reputation: 5069

The :hover style is used to set style when user places mouse over element.

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

And you can use the border-bottom property instead of text-decoration for dotted, dashed and width styling.

Upvotes: 0

Kermit
Kermit

Reputation: 34055

Use border-bottom:

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

See the demo

Upvotes: 8

Related Questions