CSS content attribute for current item

Question

Is there any "native" HTML/CSS way to use the

:before { content: ''; }
:after  { content: ''; }

attributes to the current statement (instead of a pseudo before or after element)?

Something like that?

.current-item {
    content: 'New';
}

Edit

Background: I would like to do a responsive workaround for a long word that I would like to replace by a shorter word by using

@media (max-width: 680px) {}

Answer 1

Current CSS specifications define the content property as applying to :before and :after pseudo-elements only. There have been drafts that would allow much wider use, but they have mostly not been implemented. WebKit browsers let you specify an image value only, e.g. .current-item { content: url(New.png) }, but you probably need a cross-browser solution.

What you can do is to have two elements and switch between them in display, as suggested in comments. You can make one of the alternatives content proper in HTML and the other one generated content, using an element with empty content. An advantage is that then the page content proper, as “seen” e.g. by search engines and in non-CSS rendering, has just one of the alternatives. Example (click on “Full page” to see the wide-viewport rendering):

<style>
@media (max-width: 680px) {
  .current-item {
     display: none;
   }
   .current-item-2:after {
     content: "New";
   }
}
</style>
<span class=current-item>Totally renewed</span><span class=current-item-2></span>