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.
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_
}<div class="item">_x000D_
<a href="">_x000D_
<p class="label success new-label"><span class="align">New</span></p>_x000D_
</a>_x000D_
</div>Here's a JSFiddle to show you what I'm working with.
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';
}