Change button-text based on viewport width

Question

I've got a button to close a lightbox in my homepage.

It's text says 'Close' and it is-right-aligned. However it can overlap with the headline-text when the viewport width is lower than 400 pixels.

So I want to exchange it with an 'X' using media-queries.

I tried .button:before which works but I can't get rid of the original 'Close' text this way.

How can I achieve this with only CSS?

Answer 1

Set the value of the button using the pseudo-element :before also for its default value "Close". Here's an example:

HTML

<span class="button" title="Close"></span>

CSS

.button:before {
    content: 'Close';
}

@media screen and (max-width: 200px) {
    .button:before {
        content: 'X';
    }
}

Demo

Try before buy