Hello guys, Can someone give me a little help here? I want to replace "Keymaster" word with CSS: <div class="bbpas-key"> <span class="keymaster">Keymaster</span> </div> Code (markup): What am I doing wrong with this code? https://jsfiddle.net/fyqh0ujx/ Thanks in advance.
The display:none means nothing gets shown, the word is being appended and then hidden. You coud always change the colour of keymaster to the background and move the word test over the top of it. span.keymaster { color: red } .keymaster:after { content: 'test'; color: blue; margin-left: -70px; } Code (markup): Bear in mind that search engines may think that's cloaking and it relies on you knowing how much space the hidden word took up.
Thank you guys! Worked perfectly, but I need to change multiple texts, that's why I used the other class. Here goes the full code: https://jsfiddle.net/fyqh0ujx/3/ How can I edit each text inside the span? Thank you once again.
Just wrap that div around each one of them: https://jsfiddle.net/fyqh0ujx/4/ Or you don't want to do that?
I need to replace each words with different words. For example, keymaster with test1, moderator with test2, etc...
This might be a bit off a question... but... WHY?!? I can't picture the usage scenario where your LAYOUT and STYLE control should be dicking with content in this manner in the first place... It reeks of doing something horribly and horrifically WRONG... but without knowing the actual usage scenario it is hard to say for sure. Lemme guess, another of these scenarios where you have "no control" over the markup, at which point it's time to deep six the entire project and start over from scratch?
That's what I was thinking -- the types of trickery GUARANTEED to get you slapped down for abuse by search... as @sarahk suggested, this runs the risk of being treated as content cloaking.