The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Semantic text replacement using css

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #36218

    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') ;

    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:

    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!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.