html - Change button-text based on viewport width -

i've got button close lightbox in homepage.

it's text says 'close' , is-right-aligned. can overlap headline-text when viewport width lower 400 pixels.

so want exchange 'x' using media-queries.

i tried .button:before works can't rid of original 'close' text way.

how can achieve css?

set value of button using pseudo-element :before default value "close". here's example:

html

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

css

.button:before {     content: 'close'; }  @media screen , (max-width: 200px) {     .button:before {         content: 'x';     } }

demo

try before buy

Macro