CSS，<anchor>标签内的内联块显示[重复]

【问题标题】：CSS, Inline-block display inside <anchor> tags [duplicate]CSS，<anchor>标签内的内联块显示[重复]
【发布时间】：2016-01-11 04:40:51
【问题描述】：

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

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

&lt;a href="somewhere..."&gt;i am an anchor&lt;/a&gt;

现在我不想在带下划线的文本中包含伪元素，所以通过挖掘我了解到我无法使用 text-decoration 实现此目的，但不知何故使用 display: inline-block; 解决了问题

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

&lt;a href="somewhere..."&gt;i am an anchor&lt;/a&gt;

谁能解释这些结果？我一直在阅读有关inline-block 显示的信息，但不明白为什么它在这种情况下有效..

【问题讨论】：

标签： html css

【解决方案1】：

Inline-block 元素不会从其父元素继承 text-underline。测试下面的代码你就明白了：

<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

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

希望能回答你的问题。

【讨论】：

这并不能解释为什么内联子项似乎“继承”了父文本装饰，即使没有为它们指定继承。
还有为什么text-decoration: none 似乎也没有删除它？
就是这样。我已经编辑了我的答案。参考 W3C 文档。