防止样式应用于:: after

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;
}