How to stop white pixels from protruding through other coloured pixels-CodePudding

I am trying to create an effect where some text changes colour from left to right when its hovered over. I create a duplicate element with ::before and set all the font properties to be the same as the parent element but only change the colour. When hovering over the parent element the ::before transistions to 100% width and that works just fine. My problem is that the white pixels "protrude" from under the red text, even though it should in theory cover up the white text.

.nav-btn {
    position: relative;
    padding: 10px 0;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    color: white;
    font-size: 1.1rem;
    font-weight: 300;
    font-family: 'Raleway';
    white-space: nowrap;
    cursor: pointer;
}

.nav-btn::before {
    content: attr(title);
    position: absolute;
    top: 0;
    left: 0;
    width: 0px;
    height: 100%;
    padding: inherit;
    font-size: inherit;
    font-family: inherit;
    font-weight: 300;
    color: #AF0C15;
    overflow: hidden;
    -webkit-transition: 1s width ease-in-out;
    transition: 1s width ease-in-out;
    z-index: 2;
}

.nav-btn:hover::before {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div className="nav-container">
    <div className="nav-btns-container">
        <Link to={'/'}>
            <button title="Lorem" className="btn nav-btn">
                Lorem
            </button>
        </Link>
        <Link to={'/'}>
            <button title="Lorem" className="btn nav-btn">
                Lorem
            </button>
        </Link>
        <Link to={'/'}>
            <button title="Lorem" className="btn nav-btn">
                Lorem
            </button>
        </Link>
        <Link to={'/'}>
            <button title="Lorem" className="btn nav-btn">
                Lorem
            </button>
        </Link>
    </div>
</div>

CodePudding user response：

I am not experiencing the problem on my laptop, but I can imagine that there could be sort of like rounding errors when the system tries to draw a character accurately on some screens.

One possibility might be to give the pseudo element the same background color as the button so as it gets wider it definitely hides the characters underneath:

.nav-btn {
  position: relative;
  padding: 10px 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  color: white;
  font-size: 1.1rem;
  font-size: 10rem;
  font-weight: 300;
  font-family: 'Raleway';
  white-space: nowrap;
  cursor: pointer;
  background: #eeeeee;
  box-sizing: border-box;
}

.nav-btn::before {
  content: attr(title);
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 100%;
  padding: inherit;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  color: #AF0C15;
  overflow: hidden;
  -webkit-transition: 1s width ease-in-out;
  transition: 1s width ease-in-out;
  background: #eeeeee;
  background: transparent;
  z-index: 2;
  box-sizing: border-box;
}

.nav-btn:hover::before {
  width: 100%;
}

<button  title="Lorem">Lorem</button>

Note: it might be worth investigating an entirely different approach using text masking and moving a colored background underneath the text.