Как расставить запятые между тегами на CSS?

Иногда проще что-то сделать на чистом CSS, чем на серверной стороне. Например, расставить запятые между тегами. Попробуем разделить подчеркнутые теги-ссылки на чистом CSS.

Вот ссылка:

 a { color:blue; text-decoration: underline; }

Добавим after-правило (это очевидно):

 a:after {
        content: ","; 
        padding-right: 5px;
        }

Теперь есть две проблемы. Во-первых, запятые у нас идут после всех ссылок, включая последнюю. А там хочется иметь ничего. Эта проблема решается легко:

 p>a:last-of-type:after {content: none;}

Вместо p можно использовать любой селектор, определяющий расположение группы тегов.

Во-вторых, так как у ссылки text-decoration: underline;, то и запятые получатся подчеркнутыми, что не очень красиво. Можно нагуглить вот такое решение этой проблемы:

 a { color:blue; text-decoration: underline; }
 a:after {
        content: ","; 
        text-decoration: none; display: inline-block;  // работают только в паре
        padding-right: 5px;
        }

... и оно почти хорошо, но из-за display: inline-block; теперь запятые приобретают неприятное желание при первой возможности оторваться от предшествующего слова и перепрыгнуть на следующую строчку.

Итак, не буду томить, решение заключается в замене text-decoration на border. Вот окончательный код:

 a { color:blue; border-bottom: 1px solid blue; }
 a:after {
        content: ","; 
        padding-right: 5px;
        border-bottom: 1px solid #FFF;
        }
 p > a:last-of-type:after {content: none;}

Недостаток решения в том, что мы должны знать цвет фона всей этой конструкции (#FFF;), и этот фон должен быть сплошным.

Причина этих ограничений в том, что элемент after идет не после тега (как все время хочется думать), а после контента тега. Таким образом наш border уже применен ко всей ссылке вместе с запятой, а предложенным хаком мы просто закрашиваем его сверху другим цветом.