如何在形状旁边放置div文本

Question

我想知道是否可以将div文本准确地定位在同一div中CSS形状的末尾，而不需要任何额外的html元素？目前，它们是重叠的。

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>

Answer 1

这样？可以对::before伪元素进行样式化。这不是"；将文本定位在CCD_ 5〃的末尾；因为文本仍然包含在<div>中，但它确实在文本之前为您提供了彩色正方形，标记中没有其他(显式(元素。

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>

Answer 2

您可以尝试使用伪元素(：before或：after(。在我的例子中，向左更改填充：15px；在div中，您可以控制框和文本之间的空间，并通过更改bottom:4px；在div内部：在您可以将它们对齐到文本的中间之前

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>