seo Question posted in
Some basic information to get you started with this can be found here.

display one word in a <span> as another word using css – SEO

So, the word is International for example.

I would like to do something like this for mobile phones for example:

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

and then style as follows for mobile phone:

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

for obvious space reasons (and SEO reasons). This does not work, but I seem to remember there is some way to do this, I just cannot recall the specific HTML tag or attribute within the tag, something like <abbr> – thanks!

Tags:

2

Answers


  1. 0

    Css content property only works on :before, :after pseudo elements, it doesn’t work on the direct elements. So you could do something like this

    HTML

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

    CSS 

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

    If you are using a mobile first approach, then change the css accordingly, hope this helps

    Login or Signup to reply.
  2. 0

    If you really need to physically change the content in the same element I can think of one way to do this. You have to create a pseudoelement for mobile devices

    @media (max-width:720px) {
   .word-international::before {
       content:"Int'l";
       font-size:12px;
    }
   .word-international {
       font-size:0px; //hide text only. if you hide whole element the pseudoelement won't be visible as well.
    }
}

    But I’d suggest using some js to change the content of element or even better have two elements with classes mobile and desktop and use media queries to show/hide them

    @media (max-width:720px) {
   .word-international.mobile {
       display: block;
    }
    .word-international.desktop {
       display: none;
    }
}
@media (min-width:721px) {
   .word-international.desktop {
       display: block;
    }
    .word-international.mobile {
       display: none;
    }
}

    This is the way it’s usually done.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search