如何使用 CSS 替换或更改文本?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10212879/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 03:38:49  来源:igfitidea点击:

How to use CSS to replace or change text?

css

提问by Bruno

How do I replace "Bookmarks" with "Links" using CSS?

如何使用 CSS 将“书签”替换为“链接”?

<div class="lfr-panel-title"> 
  <span> Bookmarks </span> 
</div>

I know CSS was not intended for this, but is there a cross-browser way?

我知道 CSS 不是为此而设计的,但是有跨浏览器的方式吗?

回答by Loktar

You could do something crazy like this.

你可以做这样疯狂的事情。

live demo

现场演示

.lfr-panel-title span{
   display:none;
}

.lfr-panel-title:after{
   content: "links";   
}?

But like everyone points out.. its not recommended.

但就像每个人都指出的那样......不推荐。

回答by Code Maverick

CSS does not changeor replaceexact text.

CSS 不会更改替换确切的文本

You need to use some sort of client-side language (JavaScript, jQuery, etc.) or server-side language (php, ASP.NET, etc.) to achieve that.

您需要使用某种客户端语言(JavaScript、jQuery 等)或服务器端语言(php、ASP.NET 等)来实现这一点。



As @Loktar states, you can mimicthat functionality via the :beforeand :afterpseudo selectors.

正如@Loktar 所述,您可以通过和伪选择器模仿该功能。:before:after

Although, it is not recommended for that use, and it is not fully cross-browser compatible when take into account IE. Look at the cross-browser compatibility chart via QuirksMode:

虽然,不推荐用于该用途,并且考虑到 IE,它不完全跨浏览器兼容。通过QuirksMode查看跨浏览器兼容性图表:

:before :after cross-browser chart

:before :after 跨浏览器图表

回答by chipcullen

Short answer: no.

简短的回答:没有。

Long answer: CSS is not intended, or very capable, at manipulating content. You could replace the text using a background image, but that is not very accessible. The various :after or :before techniques would also not be very cross-browser compatible.

长答案:CSS 并不打算或非常擅长处理内容。您可以使用背景图像替换文本,但这不是很容易访问。各种 :after 或 :before 技术也不会非常跨浏览器兼容。

You will need javascript to manipulate content in this manner.

您将需要 javascript 以这种方式操作内容。