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

Question

是否有可能获得嵌套圆 Angular 矩形表示每个 <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>