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. Is there a way to do this in css without having the text twice? Maybe using svg?

div{
  width: 400px;
  height: 40px;
  border: 1px solid #000;
  position: relative;
}
div>span{
  position: absolute;
  top: 0;
  left: 0;
}

div :nth-child(2){
  color: blue;
  clip: rect(0 200px 40px 45px);
}
div :nth-child(1){
  color: red;
  clip: rect(0 45px 40px 0);
}

<div>
<span>Some bicolored Text</span>
<span>Some bicolored Text</span>
</div>

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);
}

<div data-text="Some bicolored Text">
</div>