In this tutorial, we will be using Pseudo-elements, CSS Custom Properties and Media queries to change an image description according to screen size or other conditions. This can work for other things too, obviously, such as button text, menus, etc. The primary purpose of this tutorial is to show how you can use Custom Properties to achieve this effect.

One element - Swappable Text

Notice: whenever you change your screen size to match one of the covered sizes, the contents of the label change to match.

<img src="image.png" alt="A picture of a thing."/> <label class="last-responder"></label>
A picture of a thing.
the actual css code

First, we must set up a custom property (CSS Variable), '--contents' , which is responsible for holding the text your label will display.

/* This custom property is essential. It will determine what your label says under each given condition.*/ :root {      --contents: 'Resize your screen to see me change my contents to match your screen size.' }

The appearance of your label is up to you; you could simply use an unstyled label if that's what you need. In fact, it could be any element, as the important part is what your CSS does with it.

For that, we can use a pseudo-element, such as '::after'(recommended; if you want your custom text to appear after a set of predefined text. Use before if you want it to appear *before* your existing text).

/* This class is responsible to your label's appearance, which is optional. What matters most is the pseudo-element. In reality, you can skip straight to defining the pseudo-element without any of this extra code. */ .last-responder {      background-color: black;      color: white;      display: block;      /* Margin is only required because I'm using Anole's codeblock feature: */      margin: 1px 0 -35px 0;      text-align: center;      width: 100%; } /* All you need is to hook up your content to a custom property. */ .last-responder::after {      content: var(--contents); }
Now we make it responsive:

We've already set up our custom property at the top of the document, '--contents'. Now all you need to do is set up a number of media queries, which will change the value of '--contents', depending on various conditions, in this case, screen size.

Media queries are even more powerful than this however. You can view a full list of possibilities here

@media only screen and (max-width: 1000px) {      :root {          --contents: 'Getting smaller! Your screen width is 1000px or less.';      } } @media only screen and (max-width: 768px) {      :root {          --contents: 'On a tablet? Your screen width is 768px less.';      } } @media only screen and (max-width: 500px) {      :root {          --contents: 'It\'s a bit cramped! Screen >= 500px.';      } } @media only screen and (max-width: 300px) {      :root {          --contents: 'O_o';      } }
Note! I've specifically listed these queries in descending order, from biggest to smallest. This is essential, because CSS is read as a cascade, from top to bottom (or beginning to end, if that makes more sense). If you place a query referring to a smaller screen size above a query for a larger screen size, and the contents match, the one lowest in the "physical" order ends up being applied last. This would mean that whatever you've set for the smaller screen size would be ignored.
BONUS - Hiding your label altogether, or swapping it with another.

Custom properties can be used for just about anything in CSS, and can even be nested! With this in mind, you can use another custom property to set 'display:' to 'none' at certain sizes or under certain conditions, or, to swap one element for another. Of course, you don't *need* custom properties for this; you could already simply use the same class and change it's properties within a query. However, custom properties open up the door for more possibilities, including running calculations!

One of the biggest benefits of the method described in this tutorial is that you get to reduce the level of duplication in your markup (no need for multiple elements to display changing content). But! That's not all you can do! CSS Custom Properties open the door to some fascinating possibilites - too numerous to cover here, so look out for some more useful ideas in the future.