如何在不删除文本内部的情况下隐藏标签上的文本：在伪元素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;
}

小小提琴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上运行正常，我会等待更好的答案

Answer 2

我不认为这是可能的，除非你将文本包装成另一个元素，如<span>。

a > span {
    display: none;
}
a:before {
    content: "I need to show up"
}

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