Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

remove link underline from image only if the anchor tag contains an img

<a href="#">
        <img width="103" height="100"  src="img source">
    </a>

for the above html code I am using the following css

a {
    border-bottom-style: dotted;
    border-bottom-width: 1px;
}

a img {
    border: 0 none;
}

Basically what I am trying to achieve here to underline the text links while keeping img links without any underline. however I guess by styling the text links I am also styling image links, I want any image in a link should not be underlined.

Can any one suggest work around for this?

like image 896
Rahul Avatar asked Jan 30 '12 07:01

Rahul


People also ask

How do I remove the underline from a picture link?

To remove the underline from links, you can use the CSS text-decoration property.

How do I hide the underline in an anchor tag?

By setting the text-decoration to none to remove the underline from anchor tag. Syntax: text-decoration: none; Example 1: This example sets the text-decoration property to none.

Can you give an IMG a href?

To use image as a link in HTML, use the <img> tag as well as the <a> tag with the href attribute. The <img> tag is for using an image in a web page and the <a> tag is for adding a link. Under the image tag src attribute, add the URL of the image.


2 Answers

The underline is caused by the text decoration on the a. So just apply text-decoration:none to the a.

Edit: there is currently no CSS-only way to apply a style to "any a that has an img as its child". CSS does not have selectors for that. So you'll either have to make these as unique by giving them classes (or other attributes) and apply the CSS to those classes, or run some script that tests for imgs in as and gives those as the desired style.

like image 33
Mr Lister Avatar answered Oct 26 '22 11:10

Mr Lister


After a lot of Googling I finally found a neat trick that worked for me:

a img { border:none; vertical-align:top; }

Why this works?

By default both anchors and images are inline elements and by applying vertical-align:top; to an image inside an anchor, we move the anchor to the top of the image. For some reason images have higher z-index than anchors.

Source: Remove Border from Image Links

By the way, it would work great with a parent selector like a < img ... unfortunately this isn't implemented yet, but is in the workings. Take a look here: https://stackoverflow.com/a/45530/114029

like image 73
Leniel Maccaferri Avatar answered Oct 26 '22 09:10

Leniel Maccaferri