JSFiddle - React, Tailwind, and code Playground

HTML

<div class="inverted-bar" data-content="Lorem ipsum dolor sit amet"></div>

CSS

.inverted-bar {
  position: relative;
  width: 300px;
}

.inverted-bar:before,
.inverted-bar:after {
  padding: 10px 0;
  text-indent: 10px;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  content: attr(data-content);
}

.inverted-bar:before {
  background-color: aqua;
  color: red;
  width: 100%;
}

.inverted-bar:after {
  background-color: red;
  color: aqua;
  width: 30%;
}