在 <span></span> 标签内的文本上嵌套圆形边框图形？

Question

是否有可能获得嵌套圆角矩形表示每个 <span></span> 分组的效果？

例如，在html源代码中

<span>She <span>loves</span> him a <span>lot</span>.</span>

看起来像这样：

理想情况下，它可以以图形方式处理大约 20 个嵌套级别。与使用 divs 或其他东西相比，使用 span 标签很重要。

Answer 1

你可以做到

span{
    display:inline-block;
}

span:first-child{
    border:1px solid black;
    border-radius:15px;
    padding:10px;
}
span:last-child{
    border:1px solid black;
    border-radius:15px;
    padding:10px;
}

<span>She <span>loves</span> him a <span>lot</span>.</span>

在 <span></span> 标签内的文本上嵌套圆形边框图形？

Nested rounded border graphic over text within <span></span> tags?

html

css

styling