[Resolved] Dotted Underline Links

[Oleg]

Hello and thanks for the help!

How to have a dotted underline links?

[Adrian Cojocariu]

Install Simple Custom CSS Plugin

Under Appearance you will see CSS.

Insert this code after the comment.

a, a:visited, a:active {
  text-decoration: none;
  border-bottom: 1px dotted;
}
a:hover {
  text-decoration: underline;
  border: none;
}

[Adrian Cojocariu]

They are working on this it seems, but it ain’t working for me.

https://css-tricks.com/almanac/properties/t/text-decoration/

If you want the underline not to be higher than the border, go for :

a, a:visited, a:active {
  text-decoration: none;
  border-bottom: 1px dotted;
}
a:hover {
  text-decoration: none;
  border: 1px solid;
}

[Oleg]

Excellent! This is what I wanted!

[Oleg]

Another question.
How to make a dotted underlined not all links, and only a few?

[Tom]

You would have to give those links a class, like so:

<a class="dotted" href="http://generatepress.com">GeneratePress</a>

Then your CSS would be:

a.dotted, a.dotted:visited, a.dotted:active {
  text-decoration: none;
  border-bottom: 1px dotted;
}
a.dotted:hover {
  text-decoration: none;
  border: 1px solid;
}

[Adrian Cojocariu]

Yes, that is for links inside a page, where you can specify a class.

You have a visual editor, and the text editor, you can specify a class in the text editor.

[Author]

Posts