Предотвратить стиль от применения к :: после

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

Try добавления 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; 
}