Menu
I have a page with a single large image that also has a link element, and I'd like to remove the underlining from the image link. I am working in Chrome, which displays the highlighting under the image link and claims the css is introduced byuser agent stylesheet, which I understand is Chrome's default css. The user agent stylesheet brings the following style to my page:
a:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}How can I remove the underlining from this image link? I tried setting the id of my link and image to img-link then targeting that id with the following css, but haven't had any luck:
<a id="img-link" href="/images/post_images/mapping_early_english_books/provincial_printing.png" data-lightbox="provincial_printing" data-title="My caption">
<img id="img-link" src="/images/post_images/mapping_early_english_books/provincial_printing.png" alt="Provincial Printing" style="width:100%" /></a></p>
#img-link {
text-decoration: none;
}
Any help others can provide on removing this underlining will be greatly appreciated!
797
To remove underline from a link in HTML, use the CSS property text-decoration. Use it with the style attribute. The style attribute specifies an inline style for an element. Use the style attribute with the CSS property text-decoration to remove underline from a link in HTML.
To get rid of this underline, we need to do the following changes in the default decoration of the anchor tag using CSS. We can get rid of underlying hyperlinks by using CSS text-decoration property. If this property is set to be none then there will be no underline hyperlinks displayed.
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.
You can do so anywhere in the <body></body> tag to make the link not have an underline. Defining a style property this way is called inline styling. The style is specified "inline," in the element itself, in the body of your page.
#img-link, #img-link img{
text-decoration: none !important;
border:0px !important;
outline:none;
border-width: 0px;
outline-width:0px;
border-bottom: none;
}
just set the border property to zero:
#img-link {
text-decoration: none;
border: 0 !important;
}
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
