@eklemis
Posted
Hi Teano Goss,
I see you utilize text-underline to make it. Other than that you can use ::after or ::before pseudocode to get that result as well. You can google it, there must be many resources explaining the topic.
Marked as helpful
@tcaturani-goss
Posted
@eklemis I appreciate you so much for commenting on my solution! I tried : :after and for some reason the underline would disappear if my text-underline-offset went over -0.3em and I am looking to hit at least -0.4em or -0.5em. I did not think about using : :before so I am definitely going to use that pseudo-class and see if that works. Again thank you so much for taking the time to comment on my solution.
@eklemis
Posted
@tcaturani-goss Have you tried making the .learn-more-one {position relative;} and .learn-more-one::after{position: absolute}? Also you have to set the width and height of the .learn-more-one::after in order for it to be seen.
Marked as helpful
@tcaturani-goss
Posted
@eklemis Sorry for taking so long to get back to you! I am on a deep dive of sharpening my JavaScript skills and put this one on the back burner for a bit. Thankfully I finally fixed the underline issue by putting a <span> around the learn more text in my .learn-more anchors. Then using the class .learn-more-one span { background: linear gradient(hsl(49, 66%, 83%), hsl(49, 66%, 83%)) 0 110% / 100% 8px no-repeat; border-radius: 30px; padding: 0rem 0.5rem; } to position the underline behind the text.
