Why Does Display: Inline-Block; Remove an Underline from a Child Element

Why does display: inline-block; remove an underline from a child element?

Text decorations are propagated from an element to certain descendants in certain cases. The spec describes all the cases in which this happens and doesn't happen (as well as cases where the behavior is explicitly undefined). Here, the following portion is relevant:

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.

Note that this propagation is not the same as inheritance and is a separate concept entirely; indeed, text-decoration: none and text-decoration: inherit do not affect propagation in the way you'd expect them to:

• text-decoration: none simply means "this element has no text decorations of its own", and
• text-decoration: inherit means "this element has the same specified text-decoration value as its parent."

In both situations, parent text decorations will still be propagated to the element where applicable. You can force an inline-block to have the same text decoration as its parent using inherit, but not any other decorations that the parent gains through propagation from its own ancestors.

This also means that simply having display: inline-block is enough to prevent the text decorations from being propagated. You do not need to specify text-decoration: none again — it's already the initial value.

CSS, Inline-block display inside <anchor> tags

Inline-block elements doesn't inherit text-underline from their parent. Test below code and you will understand:

<div style="color:red;text-decoration:underline">
  Div with underlined text
  <span style="display:inline-block;text-decoration:inherit;">Inline block span</span>
</div>

Remove the "text-decoration:inherit" from the span and underline is gone. So in order to get text-underline for child inline-block elements, you need to inherit it from parent.

EDIT:
That's how it is. Text-decoration is not propagated to child elements in certain cases. Refer official W3C documentation : W3C Doc

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.

Hope that answers your question.

Mix an anchor's underline style with an inline-block element

add to the style tag text-decoration:inherit;

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

Child elements of link not overriding text-decoration when link is display flex

You have to add text-decoration to anchor

.test {  display: inline-block;  color: red;}
a {  text-decoration: none}

<a href="#" style="display: flex;">  <div class="test">    This isn't.  </div>  <div class="test">    This isn't.  </div></a>

Text-decoration: underline not applying with inline-block span elements

How about using border-bottom to underline the text?

a {
     text-decoration:none;
    border-bottom: 1px solid blue; /*Remove this if you want it only on hover*/
}
a:hover {
    text-decoration:none;
    border-bottom: 1px solid red;
    color:red;
}

Fiddle

display: flex shows underlined icons

<a> tags have text-decoration:underline by default, thats why the line is coming below.

Apply text-decoration: none to your anchor tags .nav a

Stack Snippet

.nav {  width: 60px;  height: 100vh;  top: 100px;  min-height: 100vh;  background-color: #cccccc;  position: fixed;  z-index: 999;  opacity: .4;  border-right: 1px solid black;  display: flex;  flex-direction: column;}
.nav a {  width: 100%;  height: 60px;  display: flex;  justify-content: center;  align-items: center;  border: none;  text-decoration: none;}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><div class="nav">  <a href=""><i class="material-icons">home</i></a>  <a href=""><i class="material-icons">shopping_basket</i></a>  <a href=""><i class="material-icons">business</i></a>  <a href=""><i class="material-icons">mail</i></a>  <a href=""><i class="material-icons">card_giftcard</i></a></div>

---

Related Topics