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

далее

WebSocket: интеграция с NetCat

Хотите добавить на сайт под управлением CMS NetCat поддержку технологии WebSocket? Обращайтесь к нам! Посетители сайта смогут получать мгновенные уведомления о событиях сайта без обращений к серверу и перезагрузок страниц. Превратите свой сайт в интерактивную площадку, работающую в реальном времени!

далее

NetCat: техническая поддержка и доработка сайтов

Мы работаем с CMS NetCat уже больше 10 лет. У нас большой опыт и ответственный подход к делу.

далее

Весь блог тут