Me preguntaba si es posible colocar el texto div exactamente al final de la forma CSS dentro del mismo div sin requerir elementos html adicionales. Actualmente, se superponen.
div { width: 10px; height: 10px; background: var(--color); } <div style="--color:red">AB</div> <div style="--color:green">CD</div> <div style="--color:blue">EF</div>¿Como esto? El pseudo elemento::before se puede diseñar. No es "colocar el texto al final de <div> " ya que el texto todavía está contenido en <div> , pero obtiene el cuadrado de color antes del texto sin elementos adicionales (explícitos) en el marcado.
div::before { content: ''; display: inline-block; width: 10px; height: 10px; background: var(--color); } <div style="--color:red">AB</div> <div style="--color:green">CD</div> <div style="--color:blue">EF</div>Puedes probar algo con los pseudo-elementos (:antes o:después). En mi ejemplo, cambiando el padding-left: 15px; dentro de div puede controlar el espacio entre los cuadros y el texto, y cambiando bottom: 4px; dentro del div:antes de poder alinearlos en medio del texto
div { position: relative; padding-left: 15px; } div:before { position: absolute; content: ''; left: 0; bottom: 4px; width: 10px; height: 10px; background: var(--color); } <div style="--color:red">AB</div> <div style="--color:green">CD</div> <div style="--color:blue">EF</div>