HTML / CSS僅適用於第一個和最后一個目標

Question

下面的html / css可以在第一個和最后一個“她非常愛他”上正常工作。 行，為什么不為3、4、5次迭代在整個句子周圍繪制圓角矩形。

注意此代碼：

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

Answer 1

那是因為您沒有使用，請添加此jsFiddle

span{
border:1px solid black;
border-radius:15px;
padding:2px;
}

Answer 2

嘗試這樣：演示

CSS：

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

您只為第一個和最后一個孩子指定了圓角。 那就是為什么它不起作用