Html 括号符号，其上的值作为标签

我有一个这样的构建：

<ul>
    <li>
        <div>[coil]</div>
    </li>
    <li>
        <div>[coil]</div>
    </li>
    <li>
        <div>[coil]</div>
    </li>
</ul>

[线圈]


[线圈]


[线圈]

线圈表示一个3D环，该环使用css伪元素：after和：before构建。 现在，我想在左侧显示宽度（单位为mm），如一个描述，并带有一个类似括号的符号，但我不知道如何显示。我尝试了一个边框和填充物，但它不会像我想象的那样工作

应该是这样的:

希望你们中的一些css专家能帮助我

对要显示在数据属性左侧的数据使用

，并使用

：after

伪元素以获得所需结果

ul{
列表样式：无
}
李{
利润率：6px0；
}
.线圈{
保证金：0自动；
位置：相对位置；
高度：35px；
宽度：220px；
背景：#C8C8C8；
显示：块；
边框：1px实心rgba（0,0,0,0.3）；
边框左下半径：50%。5em；
边框右下半径：50%。5em；
边框左上半径：50%。5em；
边框右上角半径：50%。5em；
}
.线圈：之前{
背景：继承；
位置：绝对位置；
内容：“；
顶部：8px；
宽度：继承；
高度：4px；
边框底部：1px实心rgba（0,0,0,0.3）；
边框左下半径：50%。5em；
边框右下半径：50%。5em；
}
.线圈：之后{
背景：rgba（0,0,0,0.4）；
内容：“；
位置：绝对位置；
高度：5px；
宽度：50px；
左：82px；
顶部：4px；
边界半径：50%；
}
.线圈跨度：之后{
内容：attr（数据值）；
宽度：8px；
排名：0；
边框：1px纯黑；
位置：绝对位置；
右边界：0；
左-16px；
底部：0；
线高：35px；
文本缩进：-12px；
}

对于要显示在数据属性左侧的数据，使用

，并使用

：after

伪元素以获得所需的结果

ul{
列表样式：无
}
李{
利润率：6px0；
}
.线圈{
保证金：0自动；
位置：相对位置；
高度：35px；
宽度：220px；
背景：#C8C8C8；
显示：块；
边框：1px实心rgba（0,0,0,0.3）；
边框左下半径：50%。5em；
边框右下半径：50%。5em；
边框左上半径：50%。5em；
边框右上角半径：50%。5em；
}
.线圈：之前{
背景：继承；
位置：绝对位置；
内容：“；
顶部：8px；
宽度：继承；
高度：4px；
边框底部：1px实心rgba（0,0,0,0.3）；
边框左下半径：50%。5em；
边框右下半径：50%。5em；
}
.线圈：之后{
背景：rgba（0,0,0,0.4）；
内容：“；
位置：绝对位置；
高度：5px；
宽度：50px；
左：82px；
顶部：4px；
边界半径：50%；
}
.线圈跨度：之后{
内容：attr（数据值）；
宽度：8px；
排名：0；
边框：1px纯黑；
位置：绝对位置；
右边界：0；
左-16px；
底部：0；
线高：35px；
文本缩进：-12px；
}

检查这是否对您有帮助

ul{
列表样式：无
}
李{
利润率：6px0；
}
.线圈{
保证金：0自动；
位置：相对位置；
高度：35px；
宽度：220px；
背景：#C8C8C8；
显示：块；
边框：1px实心rgba（0,0,0,0.3）；
边框左下半径：50%。5em；
边框右下半径：50%。5em；
边框左上半径：50%。5em；
边框右上角半径：50%。5em；
}
.线圈跨度{
位置：绝对位置；
边框：1px实心#000；
边界权：无；
宽度：8px；
顶部：0.4em；
底部：0.4em；
左：-15px；
字体大小：12px；
字体系列：arial；
}
.线圈跨度：之前{
内容：attr（数据值）；
位置：绝对位置；
最高：50%；
线高：14px；
transform:translateY（-7px）；
右：20px；
}
.线圈：之前{
背景：继承；
位置：绝对位置；
内容：“；
顶部：8px；
宽度：继承；
高度：4px；
边框底部：1px实心rgba（0,0,0,0.3）；
边框左下半径：50%。5em；
边框右下半径：50%。5em；
}
.线圈：之后{
背景：rgba（0,0,0,0.4）；
内容：“；
位置：绝对位置；
高度：5px；
宽度：50px；
左：82px；
顶部：4px；
边界半径：50%；
}

检查这是否对您有帮助

ul{
列表样式：无
}
李{
利润率：6px0；
}
.线圈{
保证金：0自动；
位置：相对位置；
高度：35px；
宽度：220px；
背景：#C8C8C8；
显示：块；
边框：1px实心rgba（0,0,0,0.3）；
边框左下半径：50%。5em；
边框右下半径：50%。5em；
边框左上半径：50%。5em；
边框右上角半径：50%。5em；
}
.线圈跨度{
位置：绝对位置；
边框：1px实心#000；
边界权：无；
宽度：8px；
顶部：0.4em；
底部：0.4em；
左：-15px；
字体大小：12px；
字体系列：arial；
}
.线圈跨度：之前{
内容：attr（数据值）；
位置：绝对位置；
最高：50%；
线高：14px；
transform:translateY（-7px）；
右：20px；
}
.线圈：之前{
背景：继承；
位置：绝对位置；
内容：“；
顶部：8px；
宽度：继承；
高度：4px；
边框底部：1px实心rgba（0,0,0,0.3）；
边框左下半径：50%。5em；
边框右下半径：50%。5em；
}
.线圈：之后{
背景：rgba（0,0,0,0.4）；
内容：“；
位置：绝对位置；
高度：5px；
宽度：50px；
左：82px；
顶部：4px；
边界半径：50%；
}

你也可以发布你的css吗？哎呀，好像我的html标记有错误…更新了它。li和ul元素没有样式。每个li元素都包含一个线圈，由带有[coil]的div表示。@您可以发布一个带有html和css的工作版本吗？包括FIDDLE您也可以发布您的css吗？哎呀，好像我在html标记中有一个错误…更新了它。黎族