从flex子元素中删除下划线

Question

从flex子元素中删除下划线

4

传统的方法是把子元素变为inline-block来去除文本装饰，但这种方法在弹性盒模型中不起作用。如何只去掉示例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/

- David Le

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

将内容用元素包装起来，就像你为图标所做的那样。

匿名的弹性项（例如未包装的文本）无法使用CSS进行定位(相关文章)。

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

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

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