Inverter cor da fonte CSS com base na cor de fundo

Em CSS, não há propriedade direta que permita inverter a cor da fonte com base em a cor de fundo. No entanto, existem várias técnicas que você pode utilizar para obter esse efeito.

Usando pseudoelementos

Pseudoelementos podem ser usados ​​para criar um wrapper em torno do texto, que você pode então estilizar de forma independente. Por exemplo:

.inverted-bar {
    position: relative;
}

.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: 20%;
}

Usando dois DIVs

Para navegadores mais antigos que não suportam pseudoelementos, você pode usar dois DIVs:

.inverted-bar {
    position: relative;
    padding: 10px;
    text-indent: 10px;
}

.inverted-bar:before {
    content: attr(data-content);
    background-color: aqua;
    color: red;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    padding: 10px 0;
    width: 100%;
}

.inverted-bar > div {
    content: attr(data-content);
    background-color: red;
    color: aqua;
    position: absolute;
    padding: 10px 0;
    top: 0;
    left: 0;
    width: 20%;
}

Nota: A implementação exata pode variar dependendo dos seus requisitos específicos e do suporte do navegador.