Techs Techs - 1 year ago 83
CSS Question

Text fill with colour CSS

I've been trying to implement a text colour fill from left to right using CSS as in the following

However, instead of filling in the text with colour, the background is being filled in. In this example the text colour black should be changing to pink rather than the background.

Any help is greatly appreciated.


Answer Source

.tooltiptext {
    position: relative;
.popUpWord {
    color: pink;
.popUpWordBlack {
    color: black;
.outPop {
    margin: auto;
    background: none;
    width: 0;
    overflow: hidden;
    display: block;
    position: absolute;
    /* Unset our animation play state initially - this will reset the animation when the hover is no longer */
    animation-play-state: unset;
/* Since .outPop is hidden we add the style to either when the element is hovered or it's sibling is hovered */
.outPopBlack:hover + .outPop,
    /* Turn our animation on when we are hovering over our element */
    animation: stripes 2s linear 1 forwards;
.outPopBlack {
    display: block;
    position: absolute;
    z-index: -1;
@keyframes stripes {
    to {
        width: 32px;
<span class="tooltiptext"> 
  <span class="outPopBlack">
    <span class="popUpWordBlack">hello</span>
  <span class="outPop">
    <span class="popUpWord">hello</span>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download