17

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?

Bruno
  • 6,211
  • 16
  • 69
  • 104
  • 2
    You can't replace content with CSS. – Simone Apr 18 '12 at 15:38
  • 2
    Is there a cross-browser way to do something with CSS that CSS wasn't designed for? – DA. Apr 18 '12 at 15:39
  • 1
    @loktar is correct - but the concept is all wrong. CSS is for styling, while markup is for content. I'm sure you know this... and this is just for ONE rule, right? Oh, but then lets do it down here too, and there, and so on. It gets sticky real quick - not to mention the fact that search engines and screen readers will still read "bookmarks". – Bosworth99 Apr 18 '12 at 15:47

3 Answers3

31

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.

Loktar
  • 34,764
  • 7
  • 90
  • 104
  • 1
    Works. But is such a backwards concept. +1. – Bosworth99 Apr 18 '12 at 15:43
  • 1
    @Bosworth99 lol yeah I know, but I wanted to attempt it still. – Loktar Apr 18 '12 at 15:43
  • This exactly what I wanted! Thanks! – Bruno Apr 18 '12 at 15:44
  • 3
    +1. However, it should be noted that it will not work in any IE browser under IE8. – Code Maverick Apr 18 '12 at 15:49
  • @scott it wont ? http://kimblim.dk/css-tests/selectors/ it does !! unless you are doing ::before and ::after – ShrekOverflow Apr 18 '12 at 16:09
  • @Abhishek - In that link, I see that :before and :after say NO for IE6 and IE7. – Code Maverick Apr 18 '12 at 16:11
  • 3
    Well at some coordinate in vast space time we need to drop support for IE 6 and IE 7 or else we can only say ... we will stay in stone age for web for next decade ? makes sense ?? a simple " this website is intended to work on IE 7 , 8 , 9 , 10 & All other browsers " is enough to cause the change even Google has dropped support for IE 6 and Facebook requires IE 8 atleast to work \ – ShrekOverflow Apr 18 '12 at 16:17
  • @Abhishek - I'm not debating IE versions, I'm simply stating facts, to which you wrongly argued against. A developer needs to design/develop based on *their* clientele, not anyone else's. In some realms, IE7 is still a rather large percentage. I know at my company, we have to support IE7 and up based on the numbers. – Code Maverick Apr 18 '12 at 16:53
  • 1
    i wasnt debating i simply want the people to use the technology if available :P else use shims :-D , with javascript the shim is easy but what if the OP wants to do it on a browser where Functionality is disabled ? further on most modern-browser CSS is h/w accelerated and gets a small edge for speed without hogging up exhaustive javascript web apps even more hence i suggested using css as it is and NOT giving away the whole hack just because IE 7 wont support it , there can be a simple shim written for the whole thing using JavaScript :-) Hope that explains why we got into a senseless debate – ShrekOverflow Apr 18 '12 at 18:55
  • 1
    Almost four months later.... you can also make this somewhat dynamic `bar` and the css `span[data-alt-text]:after { content: attr(data-alt-text); /*.. rest of formatting from above .. */ }` – rlemon Sep 04 '12 at 19:38
6

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:

:before :after cross-browser chart

Community
  • 1
  • 1
Code Maverick
  • 20,171
  • 12
  • 62
  • 114
  • 1
    see http://stackoverflow.com/questions/10212879/how-to-use-css-to-replace-or-change-text/10212932#comment13117543_10212932 – rlemon Apr 18 '12 at 16:29
0

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.

You will need javascript to manipulate content in this manner.

chipcullen
  • 6,840
  • 1
  • 21
  • 17
  • Could you possibly go into a bit more detail about which browsers do not support the pseudo-element selectors? [because it looks like IE7 is the only one I should be concerned about](http://caniuse.com/#feat=css-gencontent) – rlemon Apr 18 '12 at 16:30