white-space：nowrap on pseudo element

Question

我的元素设置为a {display: inline-block;}。我添加了一个伪元素a:after {display: inline-block;}。现在，如果我将white-space: nowrap设置为父元素，我希望a和a:after始终保持在同一行。这句话是否正确？因为我在实现预期效果方面遇到了一些困难。

Answer 1

不，:pseudo元素不能像这样工作！它们不会从父级继承父级的文本样式。

a {display: inline-block; white-space: nowrap;}
a:after {display: inline-block; white-space: nowrap; content: 'Hello, how are you?'; width: 50px; border: 1px solid #ccc; overflow: hidden;}

<a href="#">Hello!</a>