Links within list items

Hi there,

your post content is output inside a div with the entry-content class. So you can use that in your CSS Selector like so:

.entry-content :is(p, li) a {
    box-shadow: 0px -1px 0px var(–bluedark-300) inset;
    transition: all 0.3s ease 0s;
    padding: 2px;
}

.entry-content :is(p, li) a:hover {
    box-shadow: 0px -4px 0px var(–bluedark-300) inset;
}

As the CSS Rule for your p and li had the same properties i also combined them using the :is pseudo selector.

Thank you David! Much appreciated as always.

Hi David,

I just tried using that CSS but removes all link styles in the content?

Cheers
Paul

Can i see a link to a page where the link styles are missing ?

Try:

.entry-content p a,
.entry-content li a {
    box-shadow: 0px -1px 0px var(–bluedark-300) inset;
    transition: all 0.3s ease 0s;
    padding: 2px;
}

.entry-content p a:hover,
.entry-content li a:hover {
    box-shadow: 0px -4px 0px var(–bluedark-300) inset;
}

Just tried that and still don't see the link styles (link to example page in private info)

Thanks

Ok, try this:

.dynamic-entry-content :is(p, li) a {
    box-shadow: 0px -1px 0px var(--bluedark-300) inset;
    transition: all 0.3s ease 0s;
    padding: 2px;
}

.dynamic-entry-content :is(p, li) a:hover {
    box-shadow: 0px -4px 0px var(--bluedark-300) inset;
}

As you're using a Block Element content template we need to use: dynamic-entry-content
And the other issue was the double hyphen in var(--bluedark-300) was getting swapped out for a long hyphen.
If it still plays up re-type the two hyphens.

Hi David,

Thank you for persisting with this and sorry to be a pain!

Just tried it and still not working for me I also tried replacing the var(--bluedark-300) with a # colour to rule that as the issue.

Cheers
Paul

Have you tried clearing your browser caches ? As i can see the styles

Ahhh can see them now - thanks you, need more coffee :)

Is there anyway those link styles also display in the sidebar on the post page (see link in private info)?

Ideally would like links also in pages body content to use the same style so for example (link in private info).

Try this instead:

#page :is(p, li) a {
    box-shadow: 0px -1px 0px var(--bluedark-300) inset;
    transition: all 0.3s ease 0s;
    padding: 2px;
}

#page :is(p, li) a:hover {
    box-shadow: 0px -4px 0px var(--bluedark-300) inset;
}

Perfect! Thank you David and have a great day!

Paul

Glad to be of help - you too