h5 squares border will add item dislocation problem

Generally, we will be in the realization of squared width:33.33%and float：leftwith the use of this grid will line up three such arrangement.

But when the border is added to the unit, since the entire width of the cell than expected, in the case of the third item down occurs.

We can use beforeand afterto solve this problem.

<div class="pure-g error-list">
    <div class="pure-u-1-3">
        <p id="error1">0</p>
        <span>异常</span>
    </div>
    <div class="pure-u-1-3">
        <p id="error2">0</p>
        <span>异常</span>
    </div>
    <div class="pure-u-1-3">
        <p id="error3">0</p>
        <span>异常</span>
    </div>
</div>

css file

.error-list div:before {
    content: " ";
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    bottom: 0;
    border-right: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}

.error-list div{
    position: relative;
    float: left;
    padding: 20px 10px;
    width: 33.33333333%;
    box-sizing: border-box;
}

.error-list:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}