Что такое &:: before, &:: after в CSS?

Я хотел создать вертикальную шкалу времени, и я наткнулся на эту страницу.

http://cssdeck.com/labs/oz2nu681

Я скопировал код, и есть некоторые вещи, с которыми у меня проблемы.

  • &::после
  • &::до
  • .radio: проверено; & +.relative;

Я пытался изменить его в этот код таблицы стилей, но застрял здесь. Кроме того, код CSS отличается от того, что содержит традиционный файл CSS. Что это за код и как его использовать?

Ответы

Ответ 1

&::after на самом деле ничего не имеет в CSS, но это особенность SASS/SCSS и, вероятно, написана в таком контексте:

li {
  /* some style 1 */

  &::after {
    /* some style 2 */
  }

}

Который компилируется в:

li { /* some style 1 */ }
li::after { /* some style 2 */ }

По сути, амперсанд в SASS использует родительский селектор при компиляции в CSS.

РЕДАКТИРОВАТЬ Вы не можете использовать амперсанд в файле .css, так как он не имеет смысла, вы можете использовать его только в файлах sass/scss, которые скомпилированы в CSS с использованием препроцессора SASS.

Сообщение в блоге (не мое) о амперсанде в SASS:

http://www.joeloliveira.com/2011/06/28/the-ampersand-a-killer-sass-feature/

РЕДАКТИРОВАТЬ 2 Дальнейшие ответы:

Все остальное ваниль CSS, ::after, ::before того являются псевдо элементы, .relative и .radio являются класс селекторов, :checked является псевдо - + классом для типов входного радио и флажка, а + является смежным селектором родственного

MDN должен быть (одним из) ваших авторитетов в документации CSS, поэтому я решил ссылаться на их страницы, а не просто копировать и вставлять содержимое их документов в этот ответ.

РЕДАКТИРОВАТЬ 3

Я понял, что конкретно не указал, что & +.relative.

Я намекал на это изначально, когда я сказал

амперсанд в SASS тянет родительский селектор, когда он компилируется в CSS

В связанном примере OPs есть этот код:

.radio:checked
  & + .relative
    label 
       ... some styles here

Если учесть, что & pulls in the parent selector вы увидите скомпилированный CSS следующим образом:

.radio:checked + .relative label { ... some styles here }

На "простом английском", если вы будете:

Элемент с классом radio, который проверяется с помощью ближайшего соседнего элемента, который имеет класс относительных и дочерний элемент этого элемента с именем тега label.