Как расставить запятые между тегами на 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 уже применен ко всей ссылке вместе с запятой, а предложенным хаком мы просто закрашиваем его сверху другим цветом.

Блог

Что с Мастерхостом? Когда заработает?!

Этот вопрос всё чаще задают в Интернете начиная примерно с 12:00 дня 2 марта. А всё потому, что он накрылся!

далее

Автоматизированная Система Управления Бэкапами

Автоматизированная Система Управления Бэкапами позволяет добиться полного контроля над резервными копиями сайтов внутри инфраструктуры веб-студии. Если вы поддерживаете десятки сайтов на разных хостингах, без подобной системы вы не можете быть на 100% уверены в том, что каждый из них был корректно зарезервирован прошлой ночью.

далее

Хорошая верстка в LESS: как?

Здесь собраны некоторые рекомендации по верстке макетов дизайна с использованием LESS. Они годятся для проектов, где необходимо сверстать сложный макет дизайна с использованием CSS-фреймоворка и LESS препроцессора.

далее

Хороший веб-дизайн: как?

Photoshop и PSD-файлы были популярны в начале века, а сейчас чтобы создать дизайн сложного веб-сайта практичнее использовать специализированные инструменты. И не только потому, что статические PSD-файлы с трудом справляются с задачей визуализации динамической тянущейся верстки и анимации. Еще и потому, что важно не только нарисовать красиво, но и удобно передать результат верстальщику.

далее

Весь блог тут