html - display one word in a <span> as another word using css -

so, word international example.

i mobile phones example:

<span class="word-international">international</span> 

and style follows mobile phone:

.word-international{     content:"int'l"; } 

for obvious space reasons (and seo reasons). not work, seem remember there way this, cannot recall specific html tag or attribute within tag, <abbr> - thanks!

css content property works on :before, :after pseudo elements, doesn't work on direct elements. this

html

<span class="test">     <span>hello</span> </span> 

css

@media screen , (max-width: 767px) {   .test span {       display:none;   }   .test:after {     content: "test";   } } 

if using mobile first approach, change css accordingly, hope helps