HTML/CSS only working on the first and last target

Question

The following html/css works correctly on the first and last "she loves him a lot." lines, why doesn't it draw the rounded rectangle around the entire sentence for the 3, 4, 5 iterations.

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

attention to this code:

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

Answer 1

that's because you are not using, Add this jsFiddle

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

Answer 2

Try like this: Demo

CSS:

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

You have given rounded corner only for first and last child. thats why it was not working