Псевдоэлемент after before: Популярно о псевдоэлементах :Before и :After / Хабр

Популярно о псевдоэлементах :Before и :After / Хабр

Псевдоэлементы :before и :after позволяют добавлять содержимое (стили) до и после элемента, к которому были применены.

Всего существует несколько типов псевдоэлементов: :first-line, :first-letter, ::selection, :before и :after. В этой статье подробно рассмотрены последние два, как наиболее полезные.

Синтаксис и поддержка браузерами

Псевдоэлементы появились еще в CSS1, но пошли в релиз только в CSS2.1. В самом начале в синтаксисе использовалось одно двоеточие, но в CSS3 используется двойное двоеточие для отличия от псевдоклассов:

Но в любом случае, современные браузеры умеют понимать оба типа синтаксиса псевдоэлементов, кроме Internet Explorer 8, который воспринимает только одно двоеточие. Поэтому надежнее использовать одно.

Пример использования псевдоэлементов

<p>  
<span>:before</span>   
    Это основной контент. 
<span>:after</span>  
</p>  

Элементы :before и :after не будут сгенерированы, т.е. не будут видны в коде страницы, поэтому они и называются псевдоэлементами.

Использование

Использовать псевдоэлементы крайне просто: :before добавляется перед нужным элементом, а :after — после.
Для добавление контента внутри псевдоэлементов можно воспользоваться CSS-свойством content.

Простой пример: необходимо добавить кавычки для цитаты:

blockquote:before {  
    content: open-quote;  
}  
blockquote:after {  
    content: close-quote;  
}  

Стилизация псевдоэлементов

К псевдоэлементом можно применять такие же стили, как и к «реальным»: изменение цвета, добавление фона, регулировка размера шрифта, выравнивание текста и т.д.

blockquote:before {  
    content: open-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: left;  
    position: relative;  
    top: 30px;  
  
}  
blockquote:after {  
    content: close-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: rightright;  
    position: relative;  
    bottombottom: 40px;  
}  

Созданные элементы по умолчанию inline-элементы, поэтому при указании высоты или ширины необходимо установить

display: block:

blockquote:before {  
    content: open-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: left;  
    position: relative;  
    top: 30px;  
    border-radius: 25px;  
  
    /** define it as a block element **/  
    display: block;  
    height: 25px;  
    width: 25px;  
}  
blockquote:after {  
    content: close-quote;  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    background: #ddd;  
    float: rightright;  
    position: relative;  
    bottombottom: 40px;  
    border-radius: 25px;  
  
    /** define it as a block element **/  
    display: block;  
    height: 25px;  
    width: 25px;  
}  

Также внутри псевдоэлемента можно использовать картинку вместо обычного текста, и даже добавлять фоновое изображение.

blockquote:before {  
    content: " ";  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    float: left;  
    position: relative;  
    top: 30px;  
    border-radius: 25px;  
  
    background: url(images/quotationmark.png) -3px -3px #ddd;  
  
    display: block;  
    height: 25px;  
    width: 25px;  
}  
blockquote:after {  
    content: " ";  
    font-size: 24pt;  
    text-align: center;  
    line-height: 42px;  
    color: #fff;  
    float: rightright;  
    position: relative;  
    bottombottom: 40px;  
    border-radius: 25px;  
  
    background: url(images/quotationmark.png) -1px -32px #ddd;  
  
    display: block;  
    height: 25px;  
    width: 25px;  
}  

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

Использование вместе с псевдоклассами

Псевдоэлементы могут быть использованы вместе с псевдоклассами, в нашем примере это поможет добавить hover-эффект кавычкам:

blockquote:hover:after, blockquote:hover:before {  
    background-color: #555;  
}  

Добавление transition-эффекта

Также можно применить свойство transition для плавного изменения цвета кавычек:

transition: all 350ms;  
-o-transition: all 350ms;  
-moz-transition: all 350ms;  
-webkit-transition: all 350ms; 

К сожалению, это нормально работает только в последних версиях Firefox.

Посмотреть демонстрацию примера из этой статьи.

Немного вдохновения

Три примера использования псевдоэлементов :before и :afte:

Fascinating Shadows

3D Button

Stacked Image Effect

Псевдоэлементы — CSS | MDN

Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору,

которое позволяет стилизовать определённую часть выбранного элемента. Например, псевдоэлемент ::first-line может быть использован для изменения шрифта первой строки абзаца.

/* Первая строка каждого элемента <p>. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

Примечание: В отличие от псевдоэлементов, псевдоклассы могут быть использованы для стилизации элемента на основе его состояния.

selector::pseudo-element {
  property: value;
}

В селекторе можно использовать только один псевдоэлемент. Он должен находиться после простых селекторов в выражении.

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

• ::after
• ::before
• ::cue
• ::first-letter
• ::first-line
• ::selection
• ::slotted
• ::backdrop Экспериментальная возможность
• ::placeholder Экспериментальная возможность
• ::marker Её поведение в будущем может измениться»> Экспериментальная возможность
• ::spelling-error (en-US) Экспериментальная возможность
• ::grammar-error Экспериментальная возможность

Браузер	Начиная с версии	Поддерживает
Internet Explorer	8.0	:pseudo-element
	9.0	:pseudo-element ::pseudo-element
Firefox (Gecko)	1.0 (1.0)	:pseudo-element
	1.0 (1.5)	:pseudo-element ::pseudo-element
Opera	4. 0	:pseudo-element
	7.0	:pseudo-element ::pseudo-element
Safari (WebKit)	1.0 (85)	:pseudo-element ::pseudo-element

• Псевдоклассы

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 10 окт. 2022 г. by MDN contributors.

Понимание CSS до и после псевдоэлементов

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

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

Что такое псевдоэлементы?

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

Некоторые псевдоэлементы:

• :: первая буква (ранее : первая буква )
• :: первая строка (ранее : первая строка )
• :: до (ранее : до )
• :: после (ранее : после )

Первоначально псевдоэлементы создавались с использованием одного двоеточия (т. е. :before ), но CSS3 ввел новое соглашение: одно двоеточие для псевдоклассов, таких как

hover , active и т. д., и двойное двоеточие для псевдоэлементов. Это было введено, чтобы отличать псевдоклассы от псевдоэлементов.
Узнайте больше о спецификации CSS3 здесь.
Браузер поддерживает :до и :после , но рекомендуется использовать двойное двоеточие.

Перед псевдоэлементом

До 9Псевдоэлемент 0004 создает псевдоэлемент перед первым дочерним элементом выбранного элемента, просто он создает элемент перед содержимым выбранного элемента.
Псевдоэлементы имеют свойство содержимого, которое можно использовать для вставки сгенерированного содержимого, изображения или строки. Они должны иметь атрибут содержимого CSS, иначе значение содержимого по умолчанию не установлено.

Ниже приведены несколько простых демонстраций псевдоэлемента ::before .

В первом примере демонстрации мы использовали

::before , чтобы добавить строку перед тегом p , а также оформить ее как обычный элемент HTML.
Во втором ::before используется для добавления стрелки маркера в список, стрелка маркера представляет собой значок Font Awesome.

После псевдоэлемента

Псевдоэлемент после очень похож на до , единственное отличие состоит в его расположении после последнего дочернего элемента выбранного элемента/после содержимого выбранного элемента.

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

Также можно комбинировать псевдоэлементы. Примечание. В соответствии со спецификацией CSS3 для каждого селектора может отображаться только один псевдоэлемент, но вы можете вызывать псевдоэлементы дважды для одного и того же селектора. Например,

 selector::before{
    .....
 }
 селектор::после{
    .....
 }
 

Войти в полноэкранный режимВыйти из полноэкранного режима

Простая демонстрация, демонстрирующая, что это ниже

Мы использовали псевдоэлементы, чтобы добавить кавычки в предложение.

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

Если у вас есть предложения или вы увидели что-то не так в статье, пожалуйста, оставьте комментарий ниже.

Полное руководство по псевдоэлементам CSS

27 декабря 2021 г.

Технически вы можете создать любой дизайн CSS без использования псевдоэлементов, но сделать это намного сложнее, и вы получите беспорядочный код. Псевдоэлементы удивительны, поскольку они позволяют вам добавлять/изменять HTML-код вашего сайта из CSS, что означает, что ваш HTML может оставаться чистым, а CSS может добавлять дополнительный контент, который ему нужен. Это может показаться очень запутанным, но все это обретет смысл, когда мы поговорим о первом типе псевдоэлемента.

Если вы предпочитаете учиться визуально, посмотрите видеоверсию этой статьи.

Что такое псевдоэлементы?

Я кратко упомянул, что псевдоэлементы — это способы добавления/изменения HTML-кода из CSS, но на самом деле это нечто большее. На самом деле существует два стиля псевдоэлементов.

Первый и, безусловно, самый популярный тип — это псевдоэлементы, которые позволяют вам добавлять контент в ваш HTML из CSS. Этих псевдоэлементов всего два (до и после), и большую часть времени в этой статье мы посвятим этим псевдоэлементам.

Другой стиль псевдоэлементов позволяет вам обращаться с определенными разделами вашего HTML, как если бы они были их собственными элементами. Хорошими примерами этого являются псевдоэлементы first-letter и first-line, которые позволяют вам стилизовать первую букву или строку текста, как если бы это был отдельный элемент. Другим примером является псевдоэлемент selection, который позволяет вам стилизовать выделенный текст. Попробуйте выделить любой текст в этом абзаце, и вы увидите этот селектор в действии. Ниже приведен CSS, который я использовал для этого эффекта.

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

Псевдоэлементы «до/после»

Чтобы добавить содержимое в HTML, вам необходимо использовать псевдоэлементы «до» и «после». Эти псевдоэлементы позволяют вам добавить один дочерний элемент в качестве первого и/или последнего дочернего элемента любого элемента, который вы выбираете в своем CSS.

В приведенном выше коде мы добавляем на страницу два новых элемента. Элемент «до» — это первый дочерний элемент, а элемент «после» — последний дочерний элемент. Вы заметите, что если это все, что вы делаете, в вашем HTML ничего не меняется. Это связано с тем, что псевдоэлементы «до/после» требуют, чтобы для свойства content было установлено значение, чтобы они отображались на странице. Это свойство содержимого определяет, что помещается внутрь нового дочернего элемента.

В следующем примере предположим, что мы начинаем с приведенного выше HTML, а затем применяем приведенный ниже CSS.

Теперь вы можете видеть, что хотя у нашего исходного HTML было только 2 дочерних элемента, у нашего фактического HTML, который видит браузер, есть 4 дочерних элемента. Два дочерних элемента исходят из HTML, а два других — из CSS. Если вы проверите свою страницу с помощью инструментов разработчика браузера, она, вероятно, будет выглядеть примерно так, как показано ниже. Я только что написал, как будет выглядеть фактический HTML с точки зрения того, как браузер на самом деле отображает контент.

Вы также заметите в нашем CSS, что свойство содержимого для элемента after представляет собой пустую строку. Это очень распространено и просто означает, что мы не хотим показывать какой-либо контент в этом элементе, так как вместо этого мы будем создавать собственные стили. Это полезно, когда вы хотите создавать фигуры с помощью CSS, такие как треугольник, который отображается внизу всплывающей подсказки.

Зачем использовать псевдоэлементы «До/После»

Может показаться, что эти элементы бесполезны, но они действительно полезны, когда вы хотите добавить определенное содержимое к определенным элементам HTML, не повторяя это содержимое в вашем HTML.

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

Если вы хотите узнать больше о функции attr , используемой в этом примере, ознакомьтесь с моей статьей CSS атрибутов данных.

Если бы я не использовал псевдоэлементы в приведенном выше примере, мне нужно было бы создать отдельный HTML-элемент в моем HTML-коде, предназначенный только для всплывающей подсказки, который может быть очень запутанным и подвержен ошибкам. Вот почему псевдоэлементы намного лучше.

Другие псевдоэлементы

Как я упоминал в начале этой статьи, существует 2 стиля псевдоэлементов, и хотя элементы «до/после» являются наиболее распространенными псевдоэлементами, которые вы будете использовать, есть и другие полезные элементы, которые вы можете использовать.

:: первая буква

Псевдоэлемент first-letter выбирает первую букву внутри тега p. Вы можете увидеть его в действии в начале этого абзаца. Это отлично подходит для добавления особого стиля к вашей первой букве, как это делают некоторые книги для первой буквы в главе. Следует отметить, что при стилизации первой буквы можно использовать только некоторые свойства CSS. Например, вы не можете изменить такие вещи, как отображение или свойства положения, но вы можете изменить такие вещи, как отступы или цвет.

:: первая линия

Подобно псевдоэлементу первой буквы, псевдоэлемент первой строки позволяет изменить стиль только первой строки содержимого в любом элементе блочного уровня. Этот псевдоэлемент еще более ограничен в том, какие свойства CSS вы можете использовать. Вы не можете использовать такие вещи, как поля или отступы, но вы можете изменить почти все, что связано с цветом или шрифтом.

::выбор

Мы уже рассмотрели этот псевдоэлемент, но, по сути, он позволяет вам стилизовать выделенный контент на странице.