- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Take for example this header:
Some text to change
…styled like this:
h1 {
text-transform: uppercase;
}
As is very trendy at the moment I wish to replace the cap A with a triangle (Δ aka Delta).
The catch: the text change must be presentational only (no replacing of text in the DOM).
This is where I am at so far:
//Wrap 'a' and 'A' in spans
var text = jQuery('h1').text();
var text = text.replace('a', 'a').replace('A', 'A') ;
jQuery('h1').html(text);
I have attempted a solution using :after to insert the delta and hiding the contents of the span. But any technique for hiding the span also naturally hides the content of :after.
Any thoughts on how to achieve this?
So this isn’t ideal, but it works: http://jsfiddle.net/joshnh/TF7je/
You sure replacing the ‘A’ is such a good idea though? It isn’t great for accessibility.
Thanks @joshuanhibbert!
I considered adding an extra span as well but was hesitant about adding more markup. Ultimately I don’t want to replace the “a” though, just making it look like it is. Copy-and-pasting text should still return “Some text to change”.
Ah, well as we are using display: none; copying and pasting won’t work anyway. Also, I updated the code so that it only queries the DOM once. It’s not a big performance increase in this case, but it is just good practise.
Nice one @wolfcry911.
Amigos, I thank you for the outstanding work!