:: преди / :: след - CSS-трикове

В ::beforeи ::afterпсевдо-елементи в CSS позволява да вмъкнете съдържанието на страница, без да има нужда от нея, за да бъде в HTML. Въпреки че крайният резултат всъщност не е в DOM, той се появява на страницата сякаш е и по същество би бил такъв:

div::before ( content: "before"; ) div::after ( content: "after"; )

 before after

Единствените причини да използвате едното над другото са:

Искате генерираното съдържание да идва преди съдържанието на елемента, позиционно.
В ::afterсъдържанието е и "след" в източник ред, така че ще се позиционира на върха на :: преди, ако подрежда върху един от друг по естествен път.

Имайте предвид, че съдържанието все още е вътре в елемента, към който са приложени. Наименованието се чувства сякаш може да дойде, разбирате ли, преди или след елемента, но наистина е преди или след другото съдържание вътре.

Стойността за съдържанието може да бъде:

Низ: content: "a string"; - специалните символи трябва да бъдат специално кодирани като Unicode обект. Вижте страницата с глифове.
Изображение: съдържание: url (/path/to/image.jpg.webp); - Изображението се вмъква с точните размери и не може да се преоразмерява. Тъй като неща като градиенти всъщност са изображения, псевдоелементът може да бъде градиент.
Нищо: съдържание: “”; - Полезно за ясна корекция и вмъкване на изображения като фонови изображения (задайте ширина и височина и дори можете да преоразмерите с размер на фона).
Брояч: content: counter(li); - Наистина полезен за стилизиране на списъци, докато не се появи маркер.

Имайте предвид, че не можете да вмъкнете HTML (поне това ще бъде изобразено като HTML). content: "";

: срещу ::

Всеки браузър, който поддържа двойно двоеточие (: :) CSS3 синтаксис, също поддържа само синтаксиса (:), но IE 8 поддържа само едноточие, така че засега се препоръчва просто да използвате едноточие за най-добра поддръжка на браузъра.

:: е по-новият формат, предназначен за разграничаване на псевдо съдържание от псевдоселектори. Ако не се нуждаете от поддръжка на IE 8, не се колебайте да използвате двойното двоеточие.

Свързани

::първа линия
::първа буква
Селектори на псевдо клас

Поддръжка на браузър

Малки проблеми:

Firefox 3.5 - не позволява абсолютно позициониране на псевдоелементи.
В Opera 9.2 празното пространство винаги се показва в този псевдоелемент, сякаш е preтекст.
IE 8 не поддържа z-индекс за тях