Question

我在文档中的每个锚点前面添加了一个锚符号

a::after {
    content: "\2693";
}

<a href="somewhere...">i am an anchor</a>

现在我不想在带下划线的文本中包含伪元素，所以从挖掘一下后我才知道我无法用text-decoration实现这一点，但不知何故使用display: inline-block;解决了问题< / p>

a::after {
    content: "\2693";
    display:inline-block;
}

<a href="somewhere...">i am an anchor</a>

任何人都可以解释这些结果吗？我一直在阅读inline-block显示，但无法理解为什么它在这种情况下有效..

Answer 1

内联块元素不会从父级继承文本下划线。测试下面的代码，您将理解：

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

从span中删除“text-decoration：inherit”，并且下划线消失了。因此，为了获得子内联块元素的文本下划线，您需要从父元素继承它。

修改这就是来龙去脉。在某些情况下，文本修饰不会传播到子元素。请参阅官方W3C文档：W3C Doc

请注意，文本修饰不会传播到浮动和绝对定位的后代，也不会传播到原子内联级后代（如内联块和内联表）的内容。

希望能回答你的问题。

CSS，<anchor>标签内的内联块显示

1 个答案: