How to change a portion of text on hover with css

css, html, jquery

Solution

CSS only method:

JSFiddle

HTML and CSS:

li a:before {
  content:"(855) TRY PETS"
}

li a:hover:before {
  content:"(855) 879 7387"
}
    <li><a href="#"></a></li>

Problem

I want my website to show: `(855) TRY PETS` when the user isn't hovered over the text but I want the text to show: `(855) 879 7387` when the user does hover over the text. Currently I have: ``` <li><a href="#"><i class="icon-phone-sign"></i>(855) TRY PETS</a></li> ``` Is there an easy way to make this change with css?

Original source

Related problems