从flex子项中删除下划线

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）进行定位。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;