Вертикальный делитель инвертирующий цвет H1

Question

Можно инвертировать цвет части h1 с помощью div по горизонтали? Пример показан на картинке.

Answer 1

Вы можете сделать это с фоновым фильтром

h1 {
  background: black;
  color: white;
  text-align: center;
  height: 2em;
  line-height: 2em;
  position: relative;
}

h1::after {
  content: "";
  backdrop-filter: invert(100%);
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -50px;
  width: 100px;
  height: 2em;
}

<h1>Hello World</h1>