The CSS attr() function, paired with a media query

CSS’s attr() function is one of those things that makes you wonder what it’s actually for — until you pair it with a media query and get something genuinely useful out of it: content that changes based on viewport width, no JavaScript required.

This isn’t the best possible example, but it’s a solid starting point. Try resizing your browser width against this to see the responsive effect:

@media all and (min-width: 800px) {
  b.nickedRes::after {
    content: attr(data-long);
    display: block;
    color: green;
    font-weight: normal;
  }
}

<b class="nickedRes" data-long="longer content goes here…">Short content goes here, keep it short!</b>

Below 800px, you get the short content sitting directly in the element. At 800px and above, attr(data-long) pulls the longer value straight out of the element’s own data attribute and renders it as a pseudo-element underneath — no duplicate markup, no script.

Worth digging into W3Schools’ media query examples and the attr() function reference for more. With CSS’s continued advancement, paired with a bit of JavaScript and server-side logic where needed, there’s a lot you can do with a web page beyond what looks obvious at first glance.