hover 右側的 | 隱藏

實現下圖所示效果

鼠標經過的時候沒有右側的 |。

一般的方法是用border-right。可是鼠標經過後一個a鏈接的時候，border-right還在。

後來想的是在a鏈接下面加span標籤，可是實現起來總是不對 a:hover span{display：none}
僅僅是鼠標經過的時候這個a鏈接下面的span隱藏，當鼠標
hover後一個a鏈接的時候span 還是在。同border-right。

最終解決方法是——增加一個span標籤與a鏈接同級。
html代碼：
<div class="bottom">
<a href="#" class="btn btn-primary">前往購物</a><span>|</span><a href="#" class="btn btn-primary">查看攻略</a>
</div>

css代碼
.bottom {
position: relative;
}
.bottom span {
position: absolute;
top: 8px;
left: 50%;
color: #fff;
}
.bottom:hover span {
display: none;
}