Archived topic
CSS to underline H2 and H3 titles
3 replies · Started by William on August 25, 2021
Hello -
Can someone help me build the CSS with the underlined color and background color when hovered over the H2 and H3 settings?
Similar to this site: https://www.fieldmag.com/articles/best-insulated-camp-cups-mugs-backpacking
I've also got images that have links that are being underlined with the same color as my usual text links. Is there a way to stop that?
https://thetakeovr.com/titan-deep-freeze-cooler-review/
Thank you.
Hi there,
you can limit the scope of your link styles to just the elements they sit within, this will stop it from appearing on things like buttons and images eg. this applies to all links in P, H2 and H3
.entry-content p a,
.entry-content h2 a,
.entry-content h3 a {
font-weight: 900;
transition: color 100ms;
box-shadow: inset 0 -14px 0 #bdff67;
}
.entry-content p a:hover,
.entry-content h2 a:hover,
.entry-content h3 a:hover {
background-color: #bdff67;
}If you want to include underline styles to NON linked headings then you can include them too eg.:
.entry-content p a,
.entry-content h2 a,
.entry-content h3 a,
.entry-content h2,
.entry-content h3 {
font-weight: 900;
transition: color 100ms;
box-shadow: inset 0 -14px 0 #bdff67;
}David as always, thank you for coming through with such elegant CSS. This is tremendously helpful.
You're most welcome - glad to be of help!
