[Resolved] Dotted Underline Links

Home Forums Support Dotted Underline Links

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #127516
    Oleg

    Hello and thanks for the help!

    How to have a dotted underline links?

    Dotted Underline Links

    #127537
    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;
    }
    
    #127538
    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;
    }
    
    #127543
    Oleg

    Excellent! This is what I wanted!

    #127548
    Oleg

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

    #127582
    Tom
    Lead Developer
    Lead Developer

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.