[html] How to change content on hover

I've been playing around with this, and I thought it would be pretty simple. What I'm trying to do is hover over the 'NEW' label. Once in its hover state, change the content from 'NEW' to 'ADD' using only CSS.

_x000D_
_x000D_
body{_x000D_
    font-family: Arial, Helvetica, sans-serif;_x000D_
}_x000D_
.item{_x000D_
    width: 30px;_x000D_
}_x000D_
a{_x000D_
    text-decoration:none;_x000D_
}_x000D_
.label {_x000D_
    padding: 1px 3px 2px;_x000D_
    font-size: 9.75px;_x000D_
    font-weight: bold;_x000D_
    color: #ffffff;_x000D_
    text-transform: uppercase;_x000D_
    white-space: nowrap;_x000D_
    background-color: #bfbfbf;_x000D_
    -webkit-border-radius: 3px;_x000D_
    -moz-border-radius: 3px;_x000D_
    border-radius: 3px;_x000D_
    text-decoration: none;_x000D_
}_x000D_
.label.success {_x000D_
    background-color: #46a546;_x000D_
}_x000D_
_x000D_
.item a p.new-label span{_x000D_
  position: relative;_x000D_
  content: 'NEW'_x000D_
}_x000D_
.item:hover a p.new-label span{_x000D_
  display: none;_x000D_
}_x000D_
.item:hover a p.new-label{_x000D_
  content: 'ADD';_x000D_
}
_x000D_
<div class="item">_x000D_
    <a href="">_x000D_
         <p class="label success new-label"><span class="align">New</span></p>_x000D_
    </a>_x000D_
</div>
_x000D_
_x000D_
_x000D_

Here's a JSFiddle to show you what I'm working with.

This question is related to html css

The answer is


The CSS content property along with ::after and ::before pseudo-elements have been introduced for this.

.item:hover a p.new-label:after{
    content: 'ADD';
}

JSFiddle Demo


Similar questions with html tag:

Similar questions with css tag: