Can we change the color of the overflown text?

Question

If I have a div with overflow: visible;, can I make the color of the overflow text different than the color of the text inside the div?

Something like this (the black box is the div):

<div style="overflow: visible; max-width: 200px;">
    Text will for sure overflow
</div>

Answer 1

Maybe with a pseudo element placed over the actual div dimensions, and using mix-blend-mode to get it to turn red color applied to the whole text, dark again:

div {
  position: relative;
  overflow: visible;
  max-width: 100px;
  white-space: nowrap;
  border: 1px solid black;
  color: #f00;
}
div::after {
  content: "";
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background: #fff;
  mix-blend-mode: color;
}

<div>Text will for sure overflow</div>

Not sure whether that might collide with any additional requirements for whole page backgrounds or something though, you’d have to test it in whatever specific scenario you need it in.

Instead of mix-blend-mode, applying some sort of filter might give similar results.

Answer 2

backdrop-filter can also do it

.box {
  position: relative;
  max-width: 100px;
  white-space: nowrap;
  padding: 3px;
  border: 1px solid black;
  color: #f00;
}

.box::after {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: grayscale(1);
}

<div class="box">Text will for sure overflow</div>

Or use background coloration like below:

.box {
  --d:100px;
  position: relative;
  max-width: var(--d);
  white-space: nowrap;
  padding: 3px;
  border: 1px solid black;
}

.box span {
  background:linear-gradient(90deg,#000 calc(var(--d) + 3px),red 0); /* we need to account for the padding */
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
}

<div class="box"><span>Text will for sure overflow</span></div>

<div class="box" style="--d:80px"><span>Text will for sure overflow</span></div>