How to remove blue underline on image?

[Sara]

Hello,

How can I remove blue underline that is showing on image?

Thanks!

[Sara]

Underline showing on image comes from a tag on image to make it linkable, how I can remove line on CSS?

Thanks!

[Leo]

Hi there,

The image links don’t have a specific class so you’d need a class like no-under-line to the image links and edit your CSS to this:

.entry-content a:not(.button):not(.no-under-line) {
    box-shadow: inset 0 -1px 0 currentColor;
    transition: color 100ms ease-in,box-shadow .13s ease-in-out;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

Hello Leo,

I tried to place that CSS code on customizer Additional CSS and did not work, can you please tell me what CSS code to place there so the underline on image is removed?

Thanks!

[David]

Hi there,

there is no simple way of excluding the Images from your <a> tag underline styles.
Instead you could target very specific elements eg. :

a.aawp-product__title {
    box-shadow: inset 0 -1px 0 currentColor;
    transition: color 100ms ease-in,box-shadow .13s ease-in-out;
}

This will add the underline just to the Amazon product titles

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

Hello David,

The only thing I want is to tell me how I can remove blue underline that is showing under pools images with white background. Image is on a html tag, I don’t understand why you say is so, complicate? or can you tell me how to create a class and I add to a tag?

[Leo]

As David explained:

there is no simple way of excluding the Images from your tag underline styles.

I’d think the best solution is to add a custom class like no-under-line to the link of your image so my CSS would work.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

Is this correct Leo?

.customimage {
no-under-line;
}

[Leo]

No. You’d need to add a class to the link of the image in the HTML:
https://www.screencast.com/t/lRiqJlLum

Have you tried David’s solution? Perhaps it’s actually the better way to go?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

Hello, I manage doing it with adding the following CSS:

a img {
text-decoration: none;
outline: none;
border: 0px none transparent;
}

[David]

The problem is the underline belongs to the <a> not the <img>

The only links i could see were those in the amazon titles – and this method is best to target just those:
https://generatepress.com/forums/topic/how-to-remove-blue-underline-on-image/#post-1317876

Are there other links that are not covered by that CSS?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

No those links are not using any CSS class just using regular a html tag

[Leo]

So is the issue solved?

If not can you please try David’s solution?
https://generatepress.com/forums/topic/how-to-remove-blue-underline-on-image/#post-1317876

Not sure how we could be helpful if you can’t try our solution.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sara]

Hi Leo,

I have tried David solution but, does not remove underline.

[Leo]

You will need to remove your previous CSS which is adding the underline and only use David’s CSS.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts