如何内联显示 ::before 元素（与元素的文本并排显示）

Question

我正在尝试仅使用 CSS 对维基百科进行换肤。我无法在维基百科页面上显示“观看”和“取消观看”文本。

如果您检查元素本页右上角的星形图标：

https://en.wikipedia.org/wiki/Main_Page

您会看到 a 标签包含文本内容（“观看”或“取消观看”）。

我想看那个文字。

我试过：

#ca-watch.icon a::before {
    display: inline-block !important;
}

.vector-menu-tabs .mw-watchlink.icon a {
    width: 10em;
}

但是，文本内容仍呈现在星形图标下方。有人知道我做错了什么吗？

谢谢！

Answer 1

有一连串的附加 CSS 设置影响下面显示的文本。

关于 A 元素：

• 宽度不足以显示文本和图标
• 设置为隐藏的溢出是您看不到“监视”文本的原因
• （内边距也在推动“watch”文本，但也是标签背景的显示方式）

关于伪元素(:before):

• 显示块（您已经覆盖）
• 定位

希望这对您有所帮助。编码愉快。