Modelesq Modelesq - 1 year ago 133
CSS Question

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.

font-family: Arial, Helvetica, sans-serif;
width: 30px;
.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 span{
position: relative;
content: 'NEW'
.item:hover a span{
display: none;
.item:hover a{
content: 'ADD';

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

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

Answer Source

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

.item:hover a{
    content: 'ADD';

JSFiddle Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download