Remove Underline Only from Anchor Element Child

Remove underline only from anchor element child

Try following css,

a:hover i{
    display: inline-block; <-- this is the trick
    text-decoration:none !important;
}

Demo

Selectively stopping text-decoration: underline on children of a link tag

Read this similar answer and its links for more information: Remove :hover on :after elemets

http://jsfiddle.net/thirtydot/ygXy6/4/

CSS:

a {
    font-size: 32px;           
    text-decoration: none;
}

a:hover span {
    text-decoration: underline;
}

HTML:

<a href="http://news.bbc.co.uk">
    <div class="inner">I don't want this bit underlined on hover. What's the big deal?</div>
    <span>This bit should be underlined on hover. Underlining here is fine. I have no objections to underlinining in this bit.</span>
</a>​

Disable underline of inside element of underlined anchor tag

Try this.

add display: inline-block; for span style

a {
    text-decoration:underline;
}

a span {
    text-decoration:none;
    display: inline-block;
}

http://jsfiddle.net/4oqyx6Le/2/

Remove underline in nested element whose parent element is underlined?

The child elements style won't change the parent element's.

You could do something like this:

<p>
    <span class="underline">Click Me</span>
    <span>?</span>
</p>

How to remove the text-decoration underline on a flex child when the parent is the anchor?

This will get rid of the underline in your fiddle .flexbox_images a { text-decoration: none; }

As to why it's on your website, all we can do is guess if you don't include the code or a link to your site. But you might try changing that line to .flexbox_images a, .flexbox_images a:hover { text-decoration: none !important; }

.flexbox_images a {

  text-decoration: none;

}

.main_box {

  background: white;

  height: 400px;

  width: 100%;

  margin: 0 auto;

  padding: 0px;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-justify-content: center;

  -ms-flex-pack: center;

  justify-content: center;

  -webkit-align-items: center;

  -ms-flex-align: center;

  align-items: center;

  overflow: hidden;

}

.main_box .flexbox_images {

  color: white;

  width: 100%;

  padding: 0px;

  overflow: auto;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

}

.flexbox_images a {

  -webkit-box-flex: 1;

  -moz-box-flex: 1;

  -webkit-flex: 1;

  -ms-flex: 1;

  flex: 1;

  width: 100%;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

}

.image_background {

  height: 250px;

  margin: 0 auto;

  -webkit-box-flex: 1;

  -moz-box-flex: 1;

  -webkit-flex: 1;

  -ms-flex: 1;

  flex: 1;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-align-items: center;

  -ms-flex-align: center;

  align-items: center;

  max-width: 101%;

}

.image_background_left {

  background-repeat: no-repeat;

  background-size: contain;

  background-image: url(http://pipsum.com/350x240.jpg);

  justify-content: flex-end;

  margin-right: -1px;

}

.image_background_right {

  background-repeat: no-repeat;

  background-size: contain;

  background-image: url(http://pipsum.com/350x240.jpg);

  justify-content: flex-start;

  margin-left: -1px;

}

.fleximagebox_link {

  font-size: 28pt;

  background: rgba(255, 255, 255, 0.85);

  color: #000!important;

  text-transform: uppercase;

  font-weight: 900;

  letter-spacing: 1.5px;

  display: -webkit-flex;

  display: -ms-flexbox;

  display: flex;

  -webkit-align-items: center;

  -ms-flex-align: center;

  align-items: center;

  width: 130px;

}

.image_background_left .fleximagebox_link {

  justify-content: flex-end;

  padding-left: 35px;

}

.image_background_right .fleximagebox_link {

  justify-content: flex-start;

  padding-right: 35px;

}

.image_background_right .fleximagebox_link p {

  font-size: 28pt!important;

  color: #000!important;

  text-transform: uppercase;

  font-weight: 900;

  letter-spacing: 1.5px;

  margin-bottom: 0px;

}

.main_black_bar {

  width: 3px;

  background: #000;

  height: 50px;

  margin-top: 15px;

  margin-bottom: 15px;

  margin-left: -1px;

}

.image_background_left .main_black_bar {

  margin-left: 35px;

}

.image_background_right .main_black_bar {

  margin-right: 35px;

}

<div class="main_box">

  <div class="flexbox_images">

    <a href="">

      <div class="image_background image_background_left">

        <div class="fleximagebox_link">Buy

          <div class="main_black_bar"> </div>

        </div>

      </div>

    </a>

    <a href="">

      <div class="image_background image_background_right">

        <div class="fleximagebox_link">

          <div class="main_black_bar"> </div>Sell</div>

      </div>

    </a>

  </div>

</div>

Any way to stop CSS :hover text-decoration underline on child?

Can you control the markup? I'd wrap the text inside the <li/> in a <span/> and write the CSS to target just the span with text-decoration:underline;.

Really though the clickable area should be an <a/> element with an href of "#". Bind a click handler to the anchor instead of the li. Then you have more pseudo-selectors like a:visited to work with and the behavior of clicking it is documented. I'm not sure if p:hover is actually supposed to work in CSS. I know it is possible to bind to any element with jQuery, but with CSS I'd stick with an anchor element.

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>

How to remove only underline from a:before?

Is it possible to remove this?

Yes, if you change the display style of the inline element from display:inline (the default) to display:inline-block:

#test p a:before {
    color: #B2B2B2;
    content: "► ";
    display:inline-block;
}

This is because the CSS specs say:

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 (see section 9.2.1.1). […] For all other elements it is propagated to any in-flow children. 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.

(Emphasis mine.)

Demo: http://jsfiddle.net/r42e5/10/

_{Thanks to @Oriol for providing the workaround that prompted me to check the specs and see that the workaround is legal.}

---

Related Topics