[Resolved] Change Hyperlink Line Style

Home Forums Support Change Hyperlink Line Style

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1362303
    jm1991

    Hi there,

    Is there a way to style the hyperlink similar to the style seen in this image (ignoring the colour) https://imgur.com/a/zajXH9

    My existing CSS to add a hyperlink line is:

    a, a:visited, a:hover {
        text-decoration: underline;

    Thanks

    #1362304
    Leo
    Staff
    Customer Support

    Hi there,

    The image link isn’t working for me.

    Can you link me to the live example you are trying to replicate?

    #1362518
    jm1991

    Hey,

    Similar to this style here https://woorkup.com/black-friday-2019/

    I’ve tried adding this CSS

    a, a:visited, a:hover {
         border-bottom: 2px solid rgba(45, 130, 230, 0.4);
    }

    But that underlines everything that has an </a> tag, including things like the Nav. I only want it applied to content in the <body> and also to the author link in the blog page headers.

    Thanks

    #1362629
    Leo
    Staff
    Customer Support

    Try this instead:

    .entry-content a, .entry-content a:visited, .entry-content a:hover {
         border-bottom: 2px solid rgba(45, 130, 230, 0.4);
    }
    #1362784
    jm1991

    Thanks that works for the most part! It would be good to have the author link in blog page headings also underlined.

    #1363014
    David
    Staff
    Customer Support

    Hi there

    include .hero-meta a in your CSS selectors:

    .entry-content a, .entry-content a:visited, .entry-content a:hover, .hero-meta a {
         border-bottom: 2px solid rgba(45, 130, 230, 0.4);
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.