css - 仅使用 css 修改/隐藏文本

Question

我有一个页面，我无法访问内容此内容的 html：

<span id="page_title_text">Welcome - Overview</span>

我想得到这个：

 <span id="page_title_text">Overview</span>

由于我不能简单地修改代码本身中的文本，我想知道是否可以仅使用 css 隐藏文本“Welcome -”（我可以访问 css 相关文件）。

有什么建议吗？感谢

Answer 1

您可以只更新文本或进行实际替换：

更新文本

document.getElementById('page_title_text').innerHTML = 'Overview' ;

代替

document.getElementById('page_title_text').innerHTML =
   document.getElementById('page_title_text').innerHTML.replace(/Welcome -/,'');

jsFiddle

Answer 2

People don't seem to be understanding your question...

I'm not sure if this can be accomplished elegantly.

You can try something "hacky" like this though:

#page_title_text {
    position:absolute;
    top: -15px;
    width: 70px;
}
#page_title_text:first-line {
    color:white;
}

JSFiddle

Of course this answer assumes existing styling etc. And it doesn't get rid of the textual content as well. There are just ways to hide it (with coloration or positioning etc.)

Answer 3

#page_title_text:before {
    content: "Welcome - ";
}