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

Блог

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

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

далее

Права Доступа в Компонентах: работают не так, как ожидается; но можно накостылить патч

Если в настройках Раздела или Инфоблока NetCat попробовать дать доступ на изменение объекта ВСЕМ, ничего не получится. Просмотр и Добавление работают одним образом, а Изменение, Включение и Удаление -- другим.

далее

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

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

далее

Как отресайзить картинки батчем?

Все фотографии, которые вы собираетесь отресайзить, должны быть в одной директории, скажем «uploads». Внутри нее можно сохранить любую структуру директорий. Мы научимся создавать копию этой директории, внутри которой все картинки будут отресайзены, причем только в сторону уменьшения разрешения.

далее

Весь блог тут