How to position div text beside shape

I was wondering if it is possible to position the div text exactly at the end of the CSS shape within the same div without requiring any additional html elements? Currently, they are overlapping.

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>

>Solution :

Like this? The ::before pseudo element can be styled. It’s not "positioning the text at the end of the <div>" since the text is still contained in the <div>, but it does get you the colored square before the text with no additional (explicit) elements in the markup.

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>