Menu
How do I replace "Bookmarks" with "Links" using 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?
449
Use the :after Pseudo-Element and the display Property to Replace Text in CSS. We can use the pseudo-elements in CSS to change or replace the contents written in HTML. Then use the :after pseudo-element and the content property to achieve our goal.
In this method, we use a child element to wrap the text, that is, the text is now inside <p> and <span> tags. So we can use the display: none CSS attribute to hide the text in the <span> element. Then we can simply replace the text as we did in the previous method, without specifying any positioning.
If you want to change the CSS styles dynamically you'll have to attach this portion of code to some event. For example, if you want to change the styles of your element when clicking on a button, then you have to first listen to the click event and attach a function containing the previous code.
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.
124
CSS does not change or replace exact text.
You need to use some sort of client-side language (JavaScript, jQuery, etc.) or server-side language (php, ASP.NET, etc.) to achieve that.
As @Loktar states, you can mimic that functionality via the :before and :after pseudo selectors.
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:
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
