How to create link styling like this?

Hi there,

try this CSS:

.entry-content p a {
    box-shadow: inset 0 -8px 0 0 rgba(0, 0, 255, 0.2);
    border-bottom: 2px solid rgba(0, 0, 255, 1);
}

OR if you want to make it real fancy, and add a hover effect then try this:

.entry-content p a {
    box-shadow: inset 0 -8px 0 0 rgba(0, 0, 255, 0.2);
    border-bottom: 2px solid rgba(0, 0, 255, 1);
    transition: all 0.3s ease;
}

.entry-content p a:hover {
    box-shadow: inset 0 -18px 0 0 rgba(0, 0, 255, 0.2);
}

Thanks David.

Wonderful! Works like a charm.

One more, how do I change the color ya?

Found it. Just need to play around with rgba(0, 0, 255, 0.2)

Thanks again David!

Glad to be of help!

Hi David,

One more thing, how do I achieve this for indent or the content inside a bullet point?

Thank you.

Hi there,

One more thing, how do I achieve this for indent or the content inside a bullet point?

Thank you.

Will this be for a specific bullet point on a specific page? Or for all bullet points on any pages?

If it's on a specific bullet point, can you link us to the page in question?

Let us know.

Hi Elvin,

It's for all pages.

You can try something like this.

.entry-content ul li {
    box-shadow: inset 0 -8px 0 0 rgba(0, 0, 255, 0.2);
    border-bottom: 2px solid rgba(0, 0, 255, 1);
    transition: all 0.3s ease;
}

.entry-content ul li:hover {
    box-shadow: inset 0 -18px 0 0 rgba(0, 0, 255, 0.2);
}

You can actually make the CSS shorter if you want to use the same CSS property for both links in the paragraph and the list items in a bullet list.

Example:

.entry-content ul li,
.entry-content p a {
    box-shadow: inset 0 -8px 0 0 rgba(0, 0, 255, 0.2);
    border-bottom: 2px solid rgba(0, 0, 255, 1);
    transition: all 0.3s ease;
}

.entry-content ul li:hover,
.entry-content p a:hover {
    box-shadow: inset 0 -18px 0 0 rgba(0, 0, 255, 0.2);
}

Thanks Elvin for the solution.

One more thing, how to to style a link (inside the bullent point / indent) to external URL e.g https://google.com too ya?

The general selector is this:

.entry-content ul li a but I'm not exactly sure if the links in your list have a specific selector that already has a styling with it.

You can try .entry-content ul li a and .entry-content ul li a:hover but if it doesn't work, you may have to let us see a sample page to check the exact CSS selectors involved. :D