css - 如何在不删除 :before pseudo element css 内的文本的情况下隐藏标签上的文本

Question

我想将文本隐藏在标签内，但将文本保留在 before 伪元素内，不更改 html 且不使用 javascript

<a href="#">Text to be hidden</a>

CSS

a:before{
    content: "I need to show up"
}

这会清除所有文本

a {
    text-indent: -999em;
    display: inline-block;
}

fiddle https://jsfiddle.net/5wrs1ft1/

Answer 1

我可以让它工作! https://jsfiddle.net/5wrs1ft1/4/

a {
    font-size: 0;
    color: transparent;
}

a:before {
    font-size: 14px;
    color: black;
    content: "I need to show up"
}

!重要!这不会在每个浏览器上工作，它在 Firefox 上的 chrome 上工作正常，我会等待更好的答案