[Resolved] Global CSS won’t apply to on-page links

[Vladimir]

Hi team,

I’ve added some underline/hover CSS to all links using the a selector:

a {
}

a:before {
}

a:hover::before {
}

However, it only appears to apply to navigation (which is not what I want), but not in-body links (which is what I want).

What am I doing wrong?

Thanks.

[David]

Hi there,

try:

.entry-content a {
}

.entry-content a:before {
}

.entry-content a:hover::before {
}

This will target the links within your content only.

[Vladimir]

Thank you David.

The header links issue is now fixed, but the CSS applies now to some links (like on the home page) but not all of them. If you check the link in my first post, there’s a piece of text that says “this is a link”, and the CSS won’t apply to it for some reason:
<a href="https://wikipedia.org" target="_blank" rel="noreferrer noopener">This is a link</a>

[David]

It is working, but your :pseduo has a -1 z-index, so its hidden behind its parent container.

How about this no pseudo method:

.entry-content a {
    box-shadow: inset 0 -4px 0 rgb(254, 186, 79);
    transition: box-shadow 0.15s ease-in;
}
.entry-content a:hover {
    box-shadow: inset 0 -12px 0 rgb(254, 186, 79);
}

[Vladimir]

This works now. You’re a star!

[David]

Glad to hear that!

[Vladimir]

One more thing, sorry: the css now applies under containers that contain the links and buttons, too. Can I fix this?

[Ying]

Hi there,

Try add :not(.gb-button,.button) after a.

For example:

.entry-content a:not(.gb-button,.button) {
    box-shadow: inset 0 -4px 0 rgb(254, 186, 79);
    transition: box-shadow 0.15s ease-in;
}
.entry-content a:not(.gb-button,.button):hover {
    box-shadow: inset 0 -12px 0 rgb(254, 186, 79);
}

[Vladimir]

Thank you, it works now!

[Ying]

You are welcome 🙂

[Author]

Posts