Removing underline from flex child

Question

The traditional way to remove text-decoration from only a child element was to make it an inline-block. (Example 1 in Fiddle)

However, this method does not work in flexbox.

How can I remove the underline from just the icon in Example 2?

.div1 {
    text-decoration: underline;
    .icon {
        display: inline-block;
        text-decoration: none;
    }

}
.div2 {
    display: flex;
    align-items: center;
    text-decoration: underline;
    .icon {
        display: inline-block;
        text-decoration: none;
    }
}

Fiddle: https://jsfiddle.net/mz4y3jgL/8/

Answer 1

Wrap the content in a span element, like you've done for the icon.

Anonymous flex items, such as unwrapped text, cannot be targeted with CSS (related post).

.div2 {
  display: flex;
  align-items: baseline;
}

.div2 > :not(.icon) {
  text-decoration: underline;
}

<div class="div2">
  <span>Example 2</span>
  <span class="icon"></span>
</div>