How to remove dotted bottom border from image links

  • leavenhall · Member ·

    I have add CSS so that the text links have a bottom dotted border of 1px. However, with some images (on the blog for example) any images with a link also show a dotted bottom border.
    I tried to solve this using :not img but failed :( so any idea how I can remove the dotted links from the images only?
    Thanking you in anticipation.

    The blog I need help with is: (visible only to logged in users)

  • hallluke · Member ·

    Can you post the URL of a page that features an image link so I can see how it looks currently on your site?

  • leavenhall · Member ·

    Hi, thank you for taking a look.
    This is a blog page where the image link is dotted https://leavenhall.com/2015/11/09/550/

  • hallluke · Member ·

    The most robust way is to switch from the visual editor to the text editor after you’ve set up your image-with-a-link and then add a class which you can then target with CSS.

    The code to add is:

    class="image"

    It would mean the HTML code when you edit the post would end up looking something like this (I’ve removed some other attributes for clarity):

    <a class="image" href="https://leavenhall.files.wordpress.com/2015/11/2015-11-07-14-35-55.jpg">
	<img src="https://leavenhall.files.wordpress.com/2015/11/2015-11-07-14-35-55.jpg ...>
</a>

    Then you can add the following CSS and all those images will lose the border. It does mean you’ll have to manually edit every image that exhibits this issue though:

    .entry-content a.image {
	border: none;
}
  • hallluke · Member ·

    You could also specify which image extensions to use, some common ones are shown below but you might need to add more if you use different image formats. The good thing about this code is that you can add it to your CSS and not worry about editing the HTML in your posts or pages:

    .entry-content a[href$=".jpg"],
.entry-content a[href$=".jpeg"],
.entry-content a[href$=".png"] {
  border: none;
}
  • leavenhall · Member ·

    Thank you very much – the second set of code worked a treat :).

  • The topic ‘How to remove dotted bottom border from image links’ is closed to new replies.