Я играл с этим, и я думал, что это будет довольно просто. Я пытаюсь навести курсор на ярлык «NEW». В состоянии наведения измените содержимое с «NEW» на «ADD», используя только CSS.

body{
    font-family: Arial, Helvetica, sans-serif;
}
.item{
    width: 30px;
}
a{
    text-decoration:none;
}
.label {
    padding: 1px 3px 2px;
    font-size: 9.75px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: #bfbfbf;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    text-decoration: none;
}
.label.success {
    background-color: #46a546;
}

.item a p.new-label span{
  position: relative;
  content: 'NEW'
}
.item:hover a p.new-label span{
  display: none;
}
.item:hover a p.new-label{
  content: 'ADD';
}

<div class="item">
    <a href="">
         <p class="label success new-label"><span class="align">New</span></p>
    </a>
</div>

ВотJSFiddle чтобы показать вам, с чем я работаю.