[Support request] How do I create a shadow around quote?

[Shami]

I want to create a shadow effect around quotes.

Check here

Also, I want to create underline below the links as one this page:

https://www.wplogout.com/create-deal-page-in-wordpress/

[Elvin]

Hi there,

Can you link us to the sample page having this exact element on your site?

To check which selectors can be used to achieve your preferred styling.

I’ve checked the page you’ve linked but I didn’t see this one in particular. (Perhaps I missed it. If I did, can you point me to where specifically it’s located? thanks)

[Shami]

First, I want to know how to create such stylish underline below links.

There are lots of links on this page:

https://www.wplogout.com/create-deal-page-in-wordpress/

[Ying]

This is the CSS that website is using, you can give it a try:

.entry-content a:not(.button):not(.wp-block-button__link):not(.gb-button) {
    text-decoration: none;
    background-image: linear-gradient( transparent 2px, #2ed392 2px, #2ed392 4px, transparent 4px ), linear-gradient( transparent 2px, #d8dce9 2px, #d8dce9 4px, transparent 4px );
    background-size: 0% 6px, 100% 6px;
    background-position: 0 bottom, 0 bottom;
    transition: background-size 0.3s ease-in-out;
    background-repeat: no-repeat;
    padding-bottom: 4px;
    font-weight: 700;
}
.entry-content a:hover:not(.button):not(.wp-block-button__link) {
    color: #115cfa;
    background-size: 100% 6px;
}

[Shami]

I tried it. And cleared the cache. it’s not having any effect on the links. I’m not seeing any difference. Only buttons shrink weirdly.

[David]

Hi there,

can you share a link to YOUR site where we can see the links ?

[Shami]

Yes, sure.

I’ve shared the website blog. Open any article and see the links.

[David]

Try this CSS:

.entry-content p a {
    text-decoration: none;
    background-image: linear-gradient( transparent 2px, #2ed392 2px, #2ed392 4px, transparent 4px ), linear-gradient( transparent 2px, #d8dce9 2px, #d8dce9 4px, transparent 4px );
    background-size: 0% 6px, 100% 6px;
    background-position: 0 bottom, 0 bottom;
    transition: background-size 0.3s ease-in-out;
    background-repeat: no-repeat;
    padding-bottom: 4px;
    font-weight: 700;
}
.entry-content p a:hover {
    color: #115cfa;
    background-size: 100% 6px;
}

It will only style links inside a paragraph thats in the main content.

[Shami]

It’s not working. I added the css. Cleared the cache. No change.

Update: I checked the same CSS on my other website.. It worked. What could be the issue?

I cleared the cache.

[David]

Where did you add the CSS to your site?

[Shami]

In “Additional CSS” under Customize section in WordPress.

[David]

Move it to the top of the Additional CSS.

[Shami]

Moved it to the top. Stil not seeing the change. When I added to my another website, it worked instantly, but for some reason it’s not working here.

[David]

The i can only assume you have some plugins caches or server caches that need clearing.

[Shami]

Hey that worked. I added the CSS via plugin.

Now please help add shadow like effect around quotes.

Check the image in the very first comment in this thread.

[Author]

Posts