javascript - 如何将 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 伪元素可以设置样式。它不是“将文本定位在 <div> 的末尾”，因为文本仍然包含在 <div> 中。 ，但它确实为您提供了文本之前的彩色方 block ，并且标记中没有其他(显式)元素。

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>