How do I not underline an element in a link?
Make the element to be inline-block
and it won't get affected by the underline:
a { text-decoration: underline;}
a #myspan { color: black; display:inline-block;}
a:active #myspan { color: grey;}
a:visited #myspan { color: yellow;}
a:hover #myspan { color: red;}
<a href="#">A link <span id="myspan">some additional information</span></a>
Remove underline for a div inside a Link
You may want to use text-decoration
property in the class .link
instead of class .innerdiv
.link { text-decoration: none;}
.link:hover .innerdiv-with-underline { text-decoration: underline;}
<a href="" class="link"> <div> <div class="innerdiv-with-underline">text with underline</div> <div class="innerdiv-without-underline">text</div> </div></a>
How to remove underline from links?
Just use text-decoration: none
in your CSS or styling.
It will remove the underline from your link:
a { text-decoration: none }
Remove blue underline from link
You are not applying text-decoration: none;
to an anchor (.boxhead a
) but to a span element (.boxhead
).
Try this:
.boxhead a {
color: #FFFFFF;
text-decoration: none;
}
Removing underline partially from a link
The cleanest option would be to use a custom class for this link
.headerLink {text-decoration:none;}
And then another class for the parts that should be underlined:
.headerLinkAction {text-decoration: underline;}
You may want to update the hover class as well.
How to Remove Underline from HyperLink?
This should do it:
<a href="http://{website}" style="text-decoration: none;" target="_blank"><span style="font-size:9pt; font-family: Arial, sans-serif;; color:#317a00;; font-weight:bold">{website}</span></a>
more info on styling links in css can be found here: https://www.w3schools.com/css/css_link.asp
Removing underline from a part of the link
Change the :before
pseudo element so that it displays as an inline-block
:
&:before {
content: '\1F847';
color: $green;
padding-right: 8px;
text-decoration: none;
display: inline-block;
}
Remove underline from part of a link
The problem is that text-decoration
propagates to descendants:
When specified on or propagated to an inline element, it affects all
the boxes generated by that element, and is further propagated to any
in-flow block-level boxes that split the inline [...]For block containers that establish an inline formatting context, the
decorations are propagated to an anonymous inline element that wraps
all the in-flow inline-level children of the block container.For all other elements it is propagated to any in-flow children.
But there are two exceptions: out-of-flow and atomic inline-level descendants:
Note that text decorations are not propagated to floating and
absolutely positioned descendants, nor to the contents of atomic
inline-level descendants such as inline blocks and inline tables.
Therefore, you can use display: inline-block
on a child to prevent its parent's text-decoration
from affecting it.
a > sup { display: inline-block; /* Remove parent's text-decoration */ color: red;}
<a href="http:/example.com//"> Example<sup class='tm'>™</sup></a>
How to remove the underline for anchors(links)?
Use CSS. this removes underlines from a
and u
elements:
a, u {
text-decoration: none;
}
Sometimes you need to override other styles for elements, in which case you can use the !important
modifier on your rule:
a {
text-decoration: none !important;
}
Related Topics
With Ng-Bind-Html-Unsafe Removed, How to Inject Html
What Is Sr-Only in Bootstrap 3
What's the Difference Between Disabled="Disabled" and Readonly="Readonly" for HTML Form Input Fields
Is Either Get or Post More Secure Than the Other
Get the Value in an Input Text Box
Can HTML Checkboxes Be Set to Readonly
How to Prevent Column Break Within an Element
Generate an HTML Response in a Java Servlet
Create HTML Table With SQL For Xml
Are Custom Elements Valid Html5
Font Awesome 5 on Pseudo Elements Shows Square Instead of Icon
Change Select Box Option Background Color
Difference Between HTML Div and Span Elements
Submit Form Using a Button Outside the ≪Form≫ Tag
Can an HTML Element Have Multiple Ids