[Resolved] Link underline and color change

Home Forums Support Link underline and color change

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1026747
    Mira

    Hi! Could you please help me how to set my links ( in the content area) to be underlined and colored?

    Like in this picture: Link underline

    Thank you in advance!

    #1026872
    David
    Staff
    Customer Support

    Hi there,

    something like this CSS:

    .entry-content p a {
        position: relative;
        z-index: 1;
    }
    
    .entry-content p a:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 10px;
        background-color: rgba(255, 0, 0, 0.5);
        z-index: -1;
    }
    #1027434
    Wes Peery

    I was looking for the exact same thing 😉 Works like a charm.. David you da man!

    #1027470
    David
    Staff
    Customer Support

    Glad to be of help 🙂

    #1027645
    Mira

    Hi!

    Unfortunately it didn’t work for me 🙁

    Also, there are 2 functions:

    1. the color is gradient
    2. when someone hovers, it highlights the whole word (like in this link: https://codepen.io/Wking/pen/BdmpVx )

    Also, not just the paragraphs should be like this but the headings as well.

    Thank you so much again!

    #1027763
    Leo
    Staff
    Customer Support

    Any chance you can open a new topic and link us to the page in question?

    Thanks 🙂

    #1027764
    Mira

    Do you mean my website’s page or the sample that I want to use as reference? 🙂

    #1027834
    David
    Staff
    Customer Support

    The CSS will only apply to anchor links that are within a Paragraph.
    If you change .entry-content p a to .entry-content a in both CSS rules it will apply to any links within the content. See if that works first then we can look at the hover effect.

    #1028032
    Mira

    Wow, now it’s working! Thank you so much:)

    #1028233
    David
    Staff
    Customer Support

    For the hover effect you can try this:

    .entry-content a:hover:after {
        height: 100%; 
        transition: height 0.2s;
    }

    And to make the gradient – in the previous code replace:

    background-color: rgba(255, 0, 0, 0.5);

    with a background linear gradient property which you can generate here:

    https://cssgradient.io

    #1028612
    Mira

    Thanks David!

    I have two last questions:)
    1. When the link is in two lines (a very long one for example, or on mobile mainly) the underline is glitching.

    2. Where do I insert the gradient code?

    Thank you so much again.

    #1028835
    David
    Staff
    Customer Support

    1. Can you point me to a page where i can see the very long link?

    2. So this CSS:

    .entry-content a:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 10px;
        background-color: rgba(255, 0, 0, 0.5);
        z-index: -1;
    }

    Becomes eg.:

    .entry-content p a:after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 10px;
        background: linear-gradient(90deg, rgba(0,89,55,1) 0%, rgba(209,182,2,1) 100%); /* edit this line */
        z-index: -1;
    }
    #1029005
    Mira

    Thank you!!

    Sure, for example: https://thegreenloot.com/vegan-meal-prep-recipes/

    #1029410
    David
    Staff
    Customer Support

    Try this method instead:

    .entry-content a {
    	box-shadow: inset 0 -0.5em #16aa6f;
    	transition: box-shadow 0.2s ease-in;
    }
    .entry-content a:hover {
    	box-shadow: inset 0 -1em #16aa6f;
    }
    #1029432
    Mira

    It works, yay! Thank you so much. 🙂

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