javascript - Text color fill CSS transition

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

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

Share Improve this question edited Mar 7, 2019 at 5:12 Asons 87.3k12 gold badges117 silver badges174 bronze badges asked Apr 8, 2017 at 4:52 Arun Shah 391 gold badge2 silver badges6 bronze badges

Why not change the color on :hover instead of using :before pseudo? – Mr. Alien Commented Apr 8, 2017 at 4:56
Trying to get the left to right color fill effect. – Arun Shah Commented Apr 8, 2017 at 4:57
This will help – Mr. Alien Commented Apr 8, 2017 at 5:38

Add a ment |

3 Answers 3

Sorted by: Reset to default 7

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 are looking for CSS3 hover link effects try the following codes below or visit https://jsfiddle/aice09/r5vv189p/1/. And if you are looking for more effects visit https://tympanus/codrops/2015/05/13/inspiration-for-text-styles-and-hover-effects/ and https://designmodo./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./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>

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Text color fill CSS transition - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)