Question

In my website, all my links are underlined when cursor mouse hover it. I have an exception for special cases. So I have some ActionLink where I would like links to be dotted and when hover links must be underline. I cannot achieve this.

Here is what I do:

@Html.ActionLink("Lire la suite...", "Details", new { slug = @post.Slug } , new { @class = "dotted-link" } )

The CSS:

 .dotted-link
 {
text-decoration: none; 
border-bottom-style:dotted;
border-bottom-width: 1px;
 }

The result:

The result when hover it:

As you can see, I have a dotted border and a plain border ?!

What is the best way to achieve this?

Thanks.

Answer 1

a.dotted-link { 
  text-decoration: none; 
  border-bottom-style: dotted; 
  border-bottom-width: 1px; 
}

a.dotted-link:hover { 
  border-bottom-style: none; 
}