How to position div text beside shape

user_11156131 0
Viewed 43

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>

css html javascript
2 Answers

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>

user_149562770

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>

user_178666010
Related