:: пре / :: после - ЦСС-трикови

::beforeИ ::afterпсеудо-елементи у ЦСС-у вам омогућава да убаците садржај на страници без да потребе да буде у ХТМЛ. Иако крајњи резултат заправо није у ДОМ-у, он се на страници појављује као да јесте и у суштини би био такав:

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

 before after

Једини разлози за коришћење једног преко другог су:

Желите да генерисани садржај долази позиционирано пре садржаја елемента.
::afterСадржај је такође "након" у изворном реда, тако да ће позиционирати на врху :: раније ако слажу једна на другу, наравно.

Имајте на уму да је садржај још увек унутар елемента на који су примењени. Именовање некако делује као да би могло доћи, знате, пре или после елемента, али заиста је пре или после другог садржаја у њему.

Вредност садржаја може бити:

Низ: content: "a string"; - посебни знакови морају бити посебно кодирани као уницоде ентитет. Погледајте страницу глифова.
Слика: садржај: урл (/патх/то/имаге.јпг); - Слика је уметнута тачних димензија и не може јој се променити величина. Пошто су ствари попут градијената заправо слике, псеудо елемент може бити градијент.
Ништа: садржај: „”; - Корисно за цлеарфик и уметање слика као позадинских слика (поставите ширину и висину, а можете чак и да промените величину у позадини).
Бројач: content: counter(li); - Заиста корисно за обликовање листа док се не појави маркер.

Имајте на уму да не можете да уметнете ХТМЛ (бар ће се приказати као ХТМЛ). content: "";

: вс ::

Сваки прегледач који подржава двоструко двотачко (: :) ЦСС3 синтакса такође подржава само (:) синтаксу, али ИЕ 8 подржава само једнотачку, па је за сада препоручљиво користити само једнотачку за најбољу подршку прегледача.

:: је новији формат намењен разликовању псеудо садржаја од псеудо-селектора. Ако вам није потребна ИЕ 8 подршка, слободно користите двотачку.

Повезан

::Прва линија
::прво слово
Изборници псеудо класе

Подршка прегледача

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

Фирефок 3.5 - не дозвољава апсолутно позиционирање псеудо елемената.
У Опера 9.2, размак се увек приказује унутар овог псеудо-елемента као да је preтекст.
ИЕ 8 не подржава з-индекс на њима