防止風格::後

Question

示範：http://jsfiddle.net/DerekL/85LNE/

現在我已申請鏈接下面的CSS樣式添加分隔符：

div > a{ 
    color: #2679c1; 
    text-decoration: none; 
} 
div > a:hover{ 
    color: #3096fb; 
    text-decoration: underline; 
} 
div > a:not(:last-child)::after{ 
    content: ' ‧ '; 
} 

但是這工作，當我徘徊在鏈接上，分隔符也被加下劃線。我希望通過增加以下規則來解決問題，但它顯然沒有效果：

div > a:not(:last-child):hover::after{ 
    text-decoration: none; 
} 

任何解決方案？ （我真的不希望包裹有<span>內容，因爲它違背了使用CSS來簡化添加分離過程的目的。）

Answer 1

JSFIDDLE

嘗試添加display:inline-block;到你的a:not(:last-child)::after。

您可以添加white-space: pre-wrap;以使.以相同的間隔出現。

a:not(:last-child)::after { 
    content: ' ‧ '; 
    display:inline-block; 
    white-space: pre-wrap; 
}