::before (:before)

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.


::before создает pseudo-element, который является первым потомком соответствующего элемента. Часто применяется для оформления дополнительным контентом { content: '' } родительского элемента. Этот элемент по умолчанию строковый { display: inline }.


/* CSS3 синтаксис */
element::before { свойства }

/* CSS2 устаревший синтаксис (нужен только для поддержки IE8) */
element:before  { свойства }

/* добавляет контент "Hello world!" перед каждым элементом <p> */
p::before { content: "Hello world!"; }

Запись ::before (с двумя двоеточиями) была введена в CSS3 для разделения между pseudo-classes и pseudo-elements. Браузеры также поддерживают устаревшую запись :before (с одним двоеточием) из стандарта CSS 2.


Adding quotation marks

One simple example of using ::before pseudo-elements is to provide quotation marks. Here we use both ::before and ::after to insert quotation characters.

HTML content

<q>Some quotes</q>, he said, <q>are better than none</q>.

CSS content

q::before { 
  content: "«";
  color: blue;
q::after { 
  content: "»";
  color: red;


Decorative example

We can style text or images in the content property almost any way we want.

HTML content

<span class="ribbon">Notice where the orange box is.</span>

CSS content

.ribbon {
  background-color: #5BC8F7;

.ribbon::before {
  content: "Look at this orange box.";
  background-color: #FFBA10;
  border-color: black;
  border-style: dotted;


To-do list

In this example we will create a simple to-do list using pseudo-elements. This method can often be used to add small touches to the UI and improve user experience.

HTML content

  <li>Buy milk</li>
  <li>Take the dog for a walk</li>
  <li>Write code</li>
  <li>Play music</li>

CSS content

li {
  list-style-type: none;
  position: relative;
  margin: 2px;
  padding: 0.5em 0.5em 0.5em 2em;
  background: lightgrey;
  font-family: sans-serif;

li.done {
  background: #CCFF99;

li.done::before {
  content: '';
  position: absolute;
  border-color: #009933;
  border-style: solid;
  border-width: 0 0.3em 0.25em 0;
  height: 1em;
  top: 1.3em;
  left: 0.6em;
  margin-top: -1em;
  transform: rotate(45deg);
  width: 0.5em;

JavaScript content

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if( ev.target.tagName === 'LI') {
}, false);

Here is the above code example running live. Note that there are no icons used, and the check-mark is actually the ::before that has been styled in CSS. Go ahead and get some stuff done.



Although the positioning fixes in Firefox 3.5 do not allow content to be generated as a separate previous sibling (as per the CSS spec stating "The :before and :after pseudo-elements elements interact with other boxes... as if they were real elements inserted just inside their associated element."), they can be used to provide a slight improvement on tableless layouts (e.g., to achieve centering) in that, as long as the content to be centered is wrapped in a further child, a column before and after the content can be introduced without adding a previous or following sibling (i.e., it is perhaps more semantically correct to add an additional span as below, than it would to add an empty <div/> before and after). (And always remember to add a width to a float, since, otherwise, it will not float!)

HTML content

<div class="example">
<span id="floatme">"Floated Before" should be generated on the left of the 
viewport and not allow overflow in this line to flow under it. Likewise 
should "Floated After" appear on the right of the viewport and not allow this 
line to flow under it.</span>

CSS content

#floatme { float: left; width: 50%; }

/* To get an empty column, just indicate a hex code for a non-breaking space: \a0 as the content (use \0000a0 when following such a space with other characters) */
.example::before {
  content: "Floated Before";
  float: left;
  width: 25%
.example::after {
  content: "Floated After";
  float: right;

/* For styling */
.example::before, .example::after, .first {
  background: yellow;
  color: red;



Specification Status Comment
CSS Pseudo-Elements Level 4
Определение '::before' в этой спецификации.
Рабочий черновик No significant changes to the previous specification.
CSS Transitions Рабочий черновик Allows transitions on properties defined on pseudo-elements.
CSS Animations Рабочий черновик Allows animations on properties defined on pseudo-elements.
Selectors Level 3
Определение '::before' в этой спецификации.
Рекомендация Introduces the two-colon syntax.
CSS Level 2 (Revision 1)
Определение '::before' в этой спецификации.
Рекомендация Initial definition, using the one-colon syntax

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
:before support (Да) 1.0 (1.7 или ранее)[1] 8.0 4 4.0
::before support (Да) 1.5 (1.8)[1] 9.0 7 4.0
Support of animations and transitions 26 4.0 (2.0) Нет Нет Нет
Feature Android Chrome Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
:before support (Да) (Да) (Да) ? ? ?
::before support (Да) (Да) (Да) 7.1 ? 5.1
Support of animations and transitions 26 (Да) 4.0 (4.0) Нет Нет Нет

[1] Firefox prior to version 3.5 only implemented the CSS 2.0 version of :before. Not allowed were position, float, list-style-* and some display properties. Firefox 3.5 removed those restrictions.

See also

Метки документа и участники

 Внесли вклад в эту страницу: e-omo
 Обновлялась последний раз: e-omo,