Invertir el color de fuente CSS según el color de fondo

En CSS, no existe una propiedad directa que le permita invertir el color de fuente según el color de fondo. Sin embargo, existen varias técnicas que puede utilizar para lograr este efecto.

Usar pseudoelementos

Se pueden usar pseudoelementos para crear un envoltorio alrededor del texto, que Luego podrás diseñar de forma independiente. Por ejemplo:

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

Uso de dos DIV

Para navegadores más antiguos que no admiten pseudoelementos, puede utilizar dos DIV en su lugar:

.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: La implementación exacta puede variar según sus requisitos específicos y la compatibilidad del navegador.