Archived topic
Specifying Link Effects
5 replies · Started by Simon on July 7, 2021
Viewing posts 1–6 of 6
Hey guys, hope you're well.
I want to illustrate my links, something similar to the code below but I'm trying to figure a way to ONLY have link effects showing within the body of a post and not on buttons, pages, menu or table of contents menu. Is this possible or unrealistic?
Many thanks
Simon
.single .entry-content a {
box-shadow: inset 0 -3px 0 #F9CE21;
}
.entry-content a:hover { box-shadow: inset 0 -30px 0 0 #F9CE21; transition: box-shadow 0.3s ease-in;
}Hi there,
try this:
.single-post .entry-content p a {
box-shadow: inset 0 -3px 0 #F9CE21;
}
.single-post .entry-content p a:hover {
box-shadow: inset 0 -30px 0 0 #F9CE21;
transition: box-shadow 0.3s ease-in;
}That selector will target <a> links within a paragraph thats in the content of the single post.
Hey David, thank you so much. Sorry to be a pain but would there be a way to include bullet points too?
You can include another selector that targets the li elements:
.single-post .entry-content p a,
.single-post .entry-content li a {
box-shadow: inset 0 -3px 0 #F9CE21;
}
.single-post .entry-content p a:hover,
.single-post .entry-content li a:hover {
box-shadow: inset 0 -30px 0 0 #F9CE21;
transition: box-shadow 0.3s ease-in;
}Amazing, thank you! :)
Glad to be of help!
This archived topic is closed to new replies.
