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

Блог

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

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

далее

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

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

далее

Tilda Module: интеграция NetCat с Tilda.cc

Представляем нашу новую разработку, модуль интеграции CMS NetCat с платформой Tilda.cc. Модуль дает возможностью полуавтоматически размещать классные лендинги прямо в структуре вашего сайта!

далее

Как оптимально заархивировать файлы, чтобы распаковать их средствами ISPmanager?

В определенных случаях файлы выгоднее заливать на веб-сервер в виде архива. Во-первых, если данные хорошо сжимаются, или же просто файлов очень много, это сократит время заливки. Во-вторых, в любом случае это обезопасит данные от случайного повреждения, так как при распаковке архива происходит проверка его целостности с помощью контрольной суммы (CRC). Однако, не вполне понятно, какой формат архива и тип сжатия выбирать? Мы провели небольшое экспериментальное исследование на эту тему.

далее

Весь блог тут