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_
}
_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_
Here's a JSFiddle to show you what I'm working with.
This exact example is present on mozilla developers page:
As you can see it even allows you to create tooltips! :) Also, instead of embedding the actual text in your CSS, you may use content: attr(data-descr);
, and store it in data-descr="ADD"
attribute of your HTML tag (which is nice because you can e.g translate it)
CSS content
can only be usef with :after
and :before
pseudo-elements, so you can try to proceed with something like this:
.item a p.new-label span:after{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span:after {
content: 'ADD';
}
The CSS :after pseudo-element matches a virtual last child of the selected element. Typically used to add cosmetic content to an element, by using the content CSS property. This element is inline by default.
This little and simple trick I just learnt may help someone trying to avoid :before or :after pseudo elements altogether (for whatever reason) in changing text on hover. You can add both texts in the HTML, but vary the CSS 'display' property based on hover. Assuming the second text 'Add' has a class named 'add-label'; here is a little modification:
span.add-label{
display:none;
}
.item:hover span.align{
display:none;
}
.item:hover span.add-label{
display:block;
}
Here is a demonstration on codepen: https://codepen.io/ifekt/pen/zBaEVJ
.label:after{_x000D_
content:'ADD';_x000D_
}_x000D_
.label:hover:after{_x000D_
content:'NEW';_x000D_
}
_x000D_
<span class="label"></span>
_x000D_
Source: Stackoverflow.com