Text with two colors

Question

I would like to have a text that switches its color at a certain point x. I have provided a sample that uses the text twice to produce the result, with the switch at 45px. I

Answer 1

You can use :before and :after pseudo classes:

div {
  width: 400px;
  height: 40px;
  border: 1px solid #000;
  position: relative;
}

div:before,
div:after {
  content:attr(data-text);
}

div:after{
  position: absolute;
  top: 0;
  left: 0;
}

div:after {
  color: blue;
  clip: rect(0 200px 40px 45px);
}

div:before {
  color: red;
  clip: rect(0 45px 40px 0);
}