How to Not Underline an Element in a Link

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.