Using the abbr element for responsive text change with CSS

I have the task to display an abbreviation on small screen and the full term on a large screen (e.g. "CSS" on small, "Cascading Style Sheets" on big screens).

I can easily do it by outputting both terms, each with a class and display:none one of them depending on media queries.

I was asking myself if I can use the abbr element to do it in a better way using this markup:

<abbr title="Cascading Style Sheets">CSS</abbr>

Below you can see how for I've got with the attr() CSS property and that it's not rendering properly. My problem is that the abbr would somehow needed to be stretched out to fit in the long term. Is there a way to do this with CSS?

@media (min-width: 500px) {
  abbr {
    display: inline-block;
    text-indent: -9999px;
  }
  abbr::before {
    content: attr(title);
    position: absolute;
    text-indent: 9999px;
  }
}

<p>
    I'm using <abbr title="Cascasing Style Sheets"> CSS </abbr> 
    for responsive text changes.</p>

https://codepen.io/smichaelsen/pen/VwYeZQZ