How to position div text beside shape-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

You can try out something with the pseudo-elements (:before or :after). In my example changing the padding-left: 15px; inside div you can control the space between the boxes and text, and by changing bottom: 4px; inside the div:before you can align them in the middle of text

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>

CodePudding user response：

I don't understand your goal. What do you mean by "CSS shape"? Text overflows block if text is bigger, as you can see in your example. If you want to make exact block element width and height, just put text into inline type element, not block ( just because block element has 100% width property by default, yet inline — only text width and height).