Text color fill CSS transition

Question

I have been trying to get the effect of color fill on text when hover over it, but did not succeed.

HTML

<a href="#" data-hover="Fill Color On Text">Fill Color On Text</a>

CSS

a {
  color: #000;
  text-decoration: none;
  transition: all 0.5s;
  position: relative;
  overflow: hidden;
  display: block;
  backface-visibility: hidden;
  background: white;
  font-size:40px;

}

a:before {
  content: attr(data-hover);
  position: absolute;
  color: red;
  left: -100%;
  transition: all 0.5s;
  background: white;
    backface-visibility: hidden;
}
a:hover:before {
  left: 0;
}

DEMO

Why not change the `color` on `:hover` instead of using `:before` pseudo? — Mr. Alien, Apr 08 '17 at 04:56
[This will help](http://stackoverflow.com/q/37952222/1542290) — Mr. Alien, Apr 08 '17 at 05:38

score 7 · Accepted Answer · answered Apr 08 '17 at 07:28

With your existing markup you simply change the transition property to width instead

body {
  font-size: 40px;
}
a {
  color: #000;
  text-decoration: none;
  position: relative;
  display: block;
  font-size:40px; 
}
a:before {
  content: attr(data-hover);
  position: absolute;
  color: red;
  left: 0;
  width: 0;
  transition: width 1s;
  overflow: hidden;
  white-space: nowrap;
}
a:hover:before {
  width: 100%;
}

<a href="#" 
   data-hover="Fill Color On Text">Fill Color On Text</a>

And you don't have to write the text twice if you use both pseudo elements

body {
  font-size: 40px;
}
a {
  color: #000;
  text-decoration: none;
  position: relative;
  display: block;
  font-size:40px; 
}
a:before {
  content: attr(data-hover);
}
a:after {
  content: attr(data-hover);
  position: absolute;
  color: red;
  left: 0;
  width: 0;
  transition: width 1s;
  overflow: hidden;
  white-space: nowrap;
}
a:hover:after {
  width: 100%;
}

<a href="#" 
   data-hover="Fill Color On Text"></a>

If you go from #000 to #f00 it's the best option, but when I use it to go from #fff to #f00, I get a yellow border on the font. Any idea how to fix that? — Marcel Grüger, May 14 '19 at 12:37
@MarcelGrüger No I don't. Tried with the above sample, where I changed to black body and white text, and no yellow border is visible. — Asons, May 14 '19 at 13:49

score 0 · Answer 2 · answered Apr 08 '17 at 05:35

If you are looking for CSS3 hover link effects try the following codes below or visit https://jsfiddle.net/aice09/r5vv189p/1/. And if you are looking for more effects visit https://tympanus.net/codrops/2015/05/13/inspiration-for-text-styles-and-hover-effects/ and https://designmodo.com/css3-hover-effects/.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Animate Text</title>
</head>
<body>
      <a href="javascript:;" onclick="window.location.href = '#!'" class="animatetext"> <span data-text="Demo 1">Demo 1</span></a>
      <a href="javascript:;" onclick="window.location.href = '#!'" class="animatetext"><span data-text="Demo 2">Demo 2</span></a>
      <a href="javascript:;" onclick="window.location.href = '#!'" class="animatetext"><span data-text="Demo 3">Demo 3</span></a>
      <a href="javascript:;" onclick="window.location.href = '#!'" class="animatetext"><span data-text="Demo 4">Demo 4</span></a>
</body>
</html>
<style type="text/css">

@import url('https://fonts.googleapis.com/css?family=Arvo');

body{
  font-family: 'Arvo', serif;
  font-weight: bold;
}

.animatetext {
  color: #fff;
  display: inline-block;
  text-decoration: none;
  overflow: hidden;
  vertical-align: top;
   background: #1C3044;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  -ms-perspective: 600px;
  perspective: 600px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
}

 .animatetext:hover span {
  background: #314559;
  -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  -moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  -ms-transform: translate3d(0px, 0px, -30px) rotateX(90deg);
  transform: translate3d(0px, 0px, -30px) rotateX(90deg);
}

  .animatetext span {
  display: block;
  position: relative;
  padding: 10px 20px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

 .animatetext span:after {
  content: attr(data-text);
  -webkit-font-smoothing: antialiased;
  padding: 10px 20px;
  color: #fff;
  background: #0e6957;
  display: block;
  position: absolute;

  left: 0;
  top: 0;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  -moz-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  -ms-transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
  transform: translate3d(0px, 105%, 0px) rotateX(-90deg);
}
</style>

score -1 · Answer 3 · answered Apr 08 '17 at 05:03

If your are looking for color fill, it can be done with simple hover.

HTML:

<a href="#" data-hover="Fill Color On Text">Fill Color On Text</a>

Css

    a {
  color: #000;
  text-decoration: none;
  transition: all 0.5s;
  position: relative;
  overflow: hidden;
  display: block;
  backface-visibility: hidden;
  background: white;
  font-size:40px;
  transition:all 0.25s;
}
a:hover{
  color: red;
}

you don't need to have after and before selectors for simple color fill

Codepdn link for example

Text color fill CSS transition

3 Answers3