Modelesq Modelesq - 4 months ago 27
CSS Question

Hover change content with css

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.

Any help would be very much appreciated.

.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';
}


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

Answer

Yes man CSS's content property along with :after and :before pseudo-elements has been introduced for you :)

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

Js Fiddle Demo

Comments