从 flex child 中删除下划线

Question

仅从子元素中删除文本装饰的传统方法是将其设为inline-block。 （小提琴中的示例 1）

但是，这种方法在 flexbox 中不起作用。

我怎样才能从示例 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;
    }
}

小提琴：https://jsfiddle.net/mz4y3jgL/8/

Answer 1

将内容包装在 span 元素中，就像您为图标所做的那样。

无法使用 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>