<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?
To remove the underline from links, you can use the CSS text-decoration property.
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.
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.
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 a
s unique by giving them classes (or other attributes) and apply the CSS to those classes, or run some script that tests for img
s in a
s and gives those a
s the desired style.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With