HTML/CSS 仅适用于第一个和最后一个目标

Question

以下 html/css 在第一个和最后一个“她非常爱他”上正常工作。行，为什么它不在第 3、4、5 次迭代中围绕整个句子绘制圆 Angular 矩形。

http://jsfiddle.net/xa3apsdc/16/

注意这段代码:

span[class]:before {
    width:100%;
    text-align:center;
    float:right;
    font:bold 10px arial;
    color:#00f;
    content: attr(class) "";
}

Answer 1

像这样尝试: Demo

CSS:

span{
    text-align:center;
    display:inline-block;
      border:1px solid black;
    border-radius:15px;
    padding:2px;
}

您只为第一个和最后一个 child 设置了圆 Angular 。这就是为什么它不起作用