How do I remove the underline from an image wrapped in an anchor?


Tags: css

Problem :

Anyhow, I have a problem. A tiny problem I suppose, but one that's bugging me. I updated the CSS for my anchors on my blog, so that they were underlined with a border. Problem now is all my images that were linked are underlined, and it looks wrong.

So I assume the only way to fix this is to apply a CSS class to all the images inside anchors so that they have border: none;. I don't know how to do this though. Anyone willing to explain if this is even possible? Thanks in advance.



Solution :

Try this:

<style type="text/css">
a img { text-decoration: none } // Images within 
</style>

However, this is awfully general and if your anchors have padding, it won't work entirely, there may be residue underlining to the right and left of your image.

It would be better to turn underlining for links off in general, define a CSS class for your anchors, and turn underlining on in that class:

a { text-decoration: none }
a.my_anchor_class { text-decoration: underline }

    CSS Howto..

    How to create a modal popup using javascript and CSS

    Empty div with 2px width and background color doesnt show with height as 100%

    How to style
    to have multiple colors?

    How to use scss with css modules / postcss inside components

    How can i display images horizontally using PHP and mysql?

    How is does Jquery display a tooltip on this span element?

    How do I 'freeze' a block level element?

    How do I modify the Datatable header style in PF Dynamic Columns?

    how to remove space from html using bootstrap

    How to perform --include-css when using the Jekyll stylus plugin

    How to make DIV constantly display text on click?

    How to divide a border into 4 equal parts?

    How to Minify CSS to its Absolute Minimalistic Essence?

    Making dijit.Dialog Transparent when it shows up

    How to get less to output a css variable with quotes

    How to make your website works on a projector?

    Google Share button not showing properly if originaly hidden

    How can i make a fixed box inside a div with scroll?

    How to change CSS background-position for the X axis only? [duplicate]

    How can I make height: “100%” work cross browser in CSS?

    How To Get Color of WebElement From Complicated css case using Webdriver?

    How to swap two button elements using float in CSS

    How To Slide One Image Out From Behind Another On Hover?

    How to access CSS children properly?

    How to keep active menu item underlined?

    How to do proper and responsive Image Grid view with display:flex [duplicate]

    I have a blinking box, how can I add a gradient to this or program it easier?

    CSS - how to put a opacity border to an input?

    How to shorten this placeholder-transitioning CSS selector using sass/compass?

    How to change the size of the radio button using CSS?