css - 两种颜色的文字

Question

我想要一个在特定点 x 切换颜色的文本。我提供了一个示例，该示例使用文本两次来生成结果，开关位于 45px。有没有办法在 css 中执行此操作而无需两次输入文本？也许使用 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

你可以使用 :before 和 :after 伪类:

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>