Иисус и псевдоэлементы

Если бы Иисус верстал, то заповедей было бы 11. Последняя гласила бы: «Не нахерачь». И детям на уроках «Основ православной культуры» объясняли бы, что херачить дивы со спанами направо и налево — это грех. Ведь в верстке нет ничего хуже, чем без раздумий добавлять элементы в документ исключительно в оформительских целях.

Добавить еще див для фона, и еще один, чтобы разделить блок напополам изящной полоской. Это удар по семантике, мертвый, бесполезный и некачественный код. Грешновато!

Хорошо, что в CSS есть псевдоэлементы. Они как друзья Джона Нэша: браузер их видит и вместе с ними работает на ЦРУ, а в коде их нет. Псевдоэлементы есть у всех элементов, кроме пустых и «заменяемых»: <br>, <img>, <button>, <input>, <select>, <textarea>, <object>.

Самые полезные из псевдоэлементов, ::before и ::after, позволяют добавлять инлайн элементы до и после содержимого элемента, к которому применяются:

.post-footer {
  text-align: center;
}

.post-footer::before {
  content: '∞';
  display: block;
}

С добавлением насилия абсолютного позиционирования:

.posts-nav {
  position: relative;
  height: 4em;
  border: 1px dashed #ccc;
  border-width: 1px 0;

  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-right: 1px dashed #ccc;
  }
}

.comments-counter {
  // стили, стили, стили
  position: relative;

  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: -4px;
    margin-top: -4px;
    border-style: solid;
    border-width: 6px 6px 6px 0;
    border-color: transparent #212121 transparent transparent;
  }
}

P. S. Ещё больше постов о программировании, тестах и культуре разработки у меня в Телеграме.