CODEWITHSUNDEEP
htmlcss
Nicholas Harder
Nicholas Harder

Reputation: 1558

CSS fill animation breaks on white space

I'm trying to use something along the lines of this that I found on codepen

It works well, unless you put a space inbetween. Then it does a weird jump animation.

https://codepen.io/sumanengbd/pen/gRjEYM

<h1 class="effect-1" data-text="Text Stuff">Text Stuff</h1>

h1.effect-1 {
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);

  &:before {
    top: 0;
    left: 0;
    width: 0;
    color: #262626;
    overflow: hidden;
    position: absolute;
    content: attr(data-text);
    transition: all 0.9s;
  }

  &:hover {

    &:before {
      width: 100%;
    }
  }
}

Upvotes: 1

Views: 211

Answers (1)

Ry-
Ry-

Reputation: 225125

When you restrict the width of the ::before, it prefers to wrap its text, so the second word ends up hidden on a second line instead of cut off to the right. It’s possible to disable wrapping, which works as a fix when the original text isn’t supposed to wrap either:

&:before {
   …
   white-space: nowrap;
}

Upvotes: 2

Related Questions