Что такое before и after css

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

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

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

  • &::after
  • &::before
  • .radio:checked; & + .родственник;

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

1 ответ

Я хочу вызвать анимацию jQuery при нажатии на контент, который я вставляю через псевдоэлементы CSS :before: и :after . Однако я не уверен, как это сделать; моя первая догадка, $(#id:before).click() не сработала. Является ли это частью функциональности jQuery? Если да, то как бы я выбрал содержимое.

Я знаю, что: before/:after селекторов недоступны в IE 6,7 http://www.quirksmode.org/css/ содержание.html Есть ли JS-хак, чтобы включить поддержку этих селекторов в IE?

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

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

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

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

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

EDIT 2 Дополнительные ответы:

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

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

EDIT 3

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

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

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

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

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

На "простом английском", если хотите:

Элемент с классом радио, который проверяется с непосредственным соседним родственным элементом, имеющим класс relative, и дочерним элементом этого элемента с именем тега label.

Похожие вопросы:

CSS Scoping говорит Потомки теневого хоста не должны создавать поля в дереве форматирования. Вместо этого содержимое активного теневого дерева генерирует поля, как если бы они были содержимым.

Я переключился на новый компьютер, и внезапно селекторы CSS :after и :before больше не работают. Что действительно странно, так это то, что селекторы :before/:after , которые я добавил раньше, на.

Есть ли способ (надежно) сбросить любые возможные правила :after и :before CSS для вновь созданного элемента? Обычно вы можете просто установить правила стиля, которые хотите сбросить.

Я хочу вызвать анимацию jQuery при нажатии на контент, который я вставляю через псевдоэлементы CSS :before: и :after . Однако я не уверен, как это сделать; моя первая догадка, $(#id:before).click().

Я знаю, что: before/:after селекторов недоступны в IE 6,7 http://www.quirksmode.org/css/ содержание.html Есть ли JS-хак, чтобы включить поддержку этих селекторов в IE?

Я вижу следующую новость на главной странице MDN CSS : Поддержка гибких коробок Gecko была адаптирована в соответствии с недавним уточнением спецификации: с Firefox 23 ::before и ::after будут.

Я делаю подпись HTML email со встроенным CSS (то есть CSS в атрибутах style ), и мне любопытно, можно ли использовать псевдоэлементы :before и :after . Если да, то как бы я реализовал что-то.

dojo / on имеет once(), что чрезвычайно полезно. Как реализовать такое поведение в dojo/aspect’s before()/after()? Я не могу поверить, что кто-то внедрил once() в dojo/on, но не dojo/aspect., я не.

Можно ли использовать атрибут CSS content (в псевдо-элементах :before/:after), чтобы фактически пометить блок его именем тега? как и attr(. ) , но для тега вместо его атрибутов. PseudoCSS: body.

:before, :after и другие псевдоэлементы CSS

:before и :after позволяют добавить содержание с помощью стиля content до и после любого тега. При этом занимаемое тегом поле растягивается.

content может принимать следующие значения:

В качестве значения content могут выступать специальные символы, но в HEX кодировке, то есть вместо « должно быть \ab. Можно воспользоваться конвертером ниже, только вместо % указывайте \ (образец).

Сделаем разрыв строки (аналог тега br) средствами CSS (пример использования).

Довольно часто в качестве значения content совсем не используют символы, оставляя кавычки пустыми.

аноним

<style type="text/css">
.b <
position: relative;
padding: 5px;
border-radius: 5px;
border: 1px solid #666;
background-color: #f7f7f7;
>

.b:before, .b:after <
content: "";
position: absolute;
left: 15px;
border-style: solid;
border-width: 20px 7px;
>

.b:before <
border-color: transparent transparent #666 transparent;
top: -40px;
>

.b:after <
border-color: transparent transparent #f7f7f7 transparent;
top: -38px;
>
</style>

Здесь из border делают угол. :before нижний уголок, более тёмный, цветом рамки общего блока. :after верхний, тоном блока. Накладываем с помощью position: absolute один поверх другого. Уголочек может быть любой формы, в зависимости от длины и цвета каждого из четырёх сторон border (другой пример). Потренируемся с помощью формы ниже

border-width:
border-color:
border-radius:

И можно получить такой вариант: 4
Тем же способом реализовывают и другие иконки CSS (автор).

Для встроенных элементов при использовании CSS спрайтов, для after и before будем задавать display: inline-block;.

Псевдоэлементы для текста

:first-letter :first-line ::selection
p:first-letter p:first-line p::selection
p::-moz-selection
первый символ
в тексте элемента
первая строка
в тексте элемента
при выделении текста

Разница между ::selection и псевдоклассом :hover.

::selection :hover
при выделении текста при наведении на текст

11 комментариев:

DivaDii Шпаргалка блоггера, уважаемая NMitra, Поздравляем с наградой! Теперь Вы — &#171;Чудо-блог&#187;.
Для того, чтобы продолжить эстафету, нужно:
— Поблагодарить того, кто наградил и разместить ссылку на его блог.
— Разместить на своем блоге изображение награды.
— Передать эстафету другим интересным блогам.
— Написать семь фактов о себе.
— Сообщить номинантам на премию в комментариях.
Подробности здесь. NMitra DivaDii, извините, сейчас совсем не получиться. У меня уже составлен список будущих публикация, да и в сети провожу всё меньше времени. Анонимный А можно с вами как-то связаться по поводу обучения css, например в скайпе? мой скайп: adviser_108 NMitra При изучении кода не нужна особо консультация. Тут в приоритете практика. Каждый раз я привожу примеры, переносите их на тестовый листок, меняйте значения. Тут нужна наглядность, словами не вижу смысла объяснять, поскольку все основные моменты, которые могут пригодиться я указываю в статье. Анонимный Дива — спамбот. Не надо с ним разговаривать. Прочитай первое его требование — все очевидно. NMitra В данном случае не думаю, что так.

Во-первых, эта эстафета действительно проходила. Знаю от читателя, который точно не робот и который тоже предложил участие.

Во-вторых, не видела автоматизированного спама данного блога, Blogger неплохо защищён, только ручной проходит.

Тем не менее искренне благодарю за заботу! Юрий Наташа, а когда используется content: url(. ), есть возможность менять размер изображения? В первую очередь интересует придание изображению адаптивных свойств. NMitra Шикарный вопрос! Я не знаю ни одного метода на сегодняшний день как это сделать. NMitra По хорошему если есть у :before content: url(. ), то ширина и высота в нём должна распространяться на изображение. Это оплошность браузеров, думаю со временем поправят. Юрий Дело в том, что использовал это свойство для оформлени заголовка.

Дело в том, что использовал эти псевдо-элементы для оформления заголовков (h1, h2 и т.д.). По обем сторонам вставлял узоры. Очень красиво получилось. К сожалению, при уменьшении ширины экрана изображение h1. 5:after url(. ) уезжает вниз (для адаптивной верстки используется Bootstrap 3).
Очевидно, придется максимальную ширину узоров подгонять под минимальную width колонок фреймворка. Другого выхода пока не вижу. Как вы считаете, Наташа, так можно делать?

NMitra Для мобильных я бы убрала узоры с помощью @Media. Там скорость загрузки более важна. Можно так сделать

:after <
content: "";
width: 100%;
height: 100%;
background-image: ;
background-position: ;
background-repeat: no-repeat;
background-size: 100% auto;
>

Псевдоэлементы ::after и ::before

::after создаёт псевдоэлемент после содержимого элемента. Этот псевдоэлемент работает только совместно со стилевым свойством content, которое определяет содержимое для вставки. Не у всех элементов есть собственное содержимое, поэтому ::after не даёт результата для <img> , <input> и ряда других элементов.

В примере 1 показано использование псевдоэлемента ::after для добавления текста в конце абзаца.

Пример 1. Применение ::after

Результат примера показан на рис. 1.

Добавление текста к абзацу с помощью ::after

Рис. 1. Добавление текста к абзацу с помощью ::after

В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content .

По своему действию ::before аналогичен ::after , но вставляет псевдоэлемент до содержимого элемента. В примере 2 показано добавление маркеров своего типа к пунктам списка посредством сокрытия стандартных маркеров и применения псевдоэлемента ::before .

Пример 2. Использование ::before

Результат данного примера показан на рис. 2.

Изменение вида маркеров с помощью ::before

Рис. 2. Изменение вида маркеров с помощью ::before

В данном примере псевдоэлемент ::before устанавливается для селектора li и определяет маркеры списка. Добавление желаемых символов происходит путём задания значения свойства content .

Блок с цитатой

::before и ::after прекрасно подходят для оформления цитат, в частности, вывода увеличенных кавычек, которые показывают пользователям, что перед ними цитата (рис. 3).

Вид цитаты с кавычками

Рис. 3. Вид цитаты с кавычками

Для отображения кавычки перед текстом мы используем ::before , а после текста — ::after . К ним же добавляем и желаемое оформление кавычек, вроде изменения цвета и размера (пример 3).

Пример 3. Кавычки в цитате

Хлебные крошки

Хлебные крошки представляют собой разновидность навигации по сайту, которая показывает путь к текущему документу и его положение в иерархии сайта (рис. 4).

Хлебные крошки

Рис. 4. Хлебные крошки

Для создания такой навигации обычно применяется список <ul> , а внутри пунктов <li> вставляются ссылки на соответствующие разделы сайта. Чтобы отделить ссылки друг от друга, между ними вставляется разделитель, в качестве него обычно используется косая черта, но можно использовать стрелку и другие символы.

Разделитель добавляем через свойство content и селектор li + li::before , он выберет все элементы <li> кроме первого (пример 4).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *