Разбиране на псевдоелемента преди и след това

Cascading Style Sheet (CSS) е предназначен предимно за прилагане на стилове в HTML маркировката, но в някои случаи, когато добавянето на допълнителен маркер към документа е излишно или не е възможно, всъщност има функция в CSS, която ни позволява да добавяме допълнителен маркер, без да нарушаваме действителният документ, а именно псевдо-елементи.

Чували сте за този термин, особено когато сте следвали някои от нашите уроци.

Всъщност има няколко члена на семейството на CSS, които са класифицирани като псевдо-елементи Както и :първа линия, :първа буква, :: селекция, :преди и :след. Но за тази статия ще ограничим покритието си само до :преди и :след, “псевдо-елементи” тук ще се отнася конкретно и за двете. Ще разгледаме този конкретен предмет от основите.

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

Най- псевдо-елементи оттогава CSS1, но :преди и :след които обсъждаме тук, бяха пуснати в CSS2.1. В началото псевдо-елементи използвайте един-двоеточие за синтаксиса, след това като уеб еволюира, в CSS3 псевдо-елементи бяха преразгледани, за да се използва двукрак ::преди & ::след - да го разграничим псевдо-класовете (т.е.. : навъртам, :активен, и така нататък).

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

Какво прави?

Накратко, псевдо-елементи ще вмъкне допълнителен елемент преди или след елемента на съдържанието, така че когато ги добавим и двете, те са технически еднакви, със следната маркировка.

:преди Това е основното съдържание. :след

Но тези елементи всъщност не са генерирани в документа. Те все още са видими на повърхността, но няма да ги намерите на източника на документа, така че на практика те са фалшив елементи.

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

Използвайки псевдо-елементи е относително лесно; следния синтаксис селектор: преди ще добави елемент преди селектора на съдържанието, докато този синтаксис селектор: след ще добави след него, и за да добавите съдържание в тях можем да използваме съдържание Имот.

Например фрагментът по-долу ще добави кавичка преди и след блоков цитат.

 blockquote: преди съдържание: отворен цитат;  blockquote: след content: close-quote;

Стилизиране на псевдоелементи

Въпреки че е фалшив елемент, псевдо-елементи действително действа като a “реален” елемент; можем да добавяме всякакви декларации за стилове, като например промяна на цвета, добавяне на фон, регулиране на размера на шрифта, подравняване на текста в него и т.н..

 blockquote: преди съдържание: отворен цитат; размер на шрифта: 24pt; text-align: center; височина на линията: 42px; цвят: #fff; фон: #ddd; поплавък: наляво; позиция: относителна; отгоре: 30px;  blockquote: след content: close-quote; размер на шрифта: 24pt; text-align: center; височина на линията: 42px; цвят: #fff; фон: #ddd; поплавък: десен; позиция: относителна; дъно: 40px;

Определяне на измерението

Генерираните елементи по подразбиране са елемент на вградено ниво, така че когато трябва да определим височината и ширината, първо трябва да я дефинираме като блоков елемент, като използваме дисплей: блок декларация.

 blockquote: преди съдържание: отворен цитат; размер на шрифта: 24pt; text-align: center; височина на линията: 42px; цвят: #fff; фон: #ddd; поплавък: наляво; позиция: относителна; отгоре: 30px; граничен радиус: 25px; / ** определят го като блок елемент ** / дисплей: блок; височина: 25px; ширина: 25px;  blockquote: след content: close-quote; размер на шрифта: 24pt; text-align: center; височина на линията: 42px; цвят: #fff; фон: #ddd; поплавък: десен; позиция: относителна; дъно: 40px; граничен радиус: 25px; / ** определят го като блок елемент ** / дисплей: блок; височина: 25px; ширина: 25px;

Прикачете фоново изображение

Също така можем да заменим съдържанието с изображение, а не само с обикновен текст. въпреки че съдържание собственост осигурява URL () , за да вмъкнете изображение, но в повечето случаи предпочитам да използвам заден план собственост за по-голям контрол върху прикрепеното изображение.

 blockquote: преди съдържание: ""; размер на шрифта: 24pt; text-align: center; височина на линията: 42px; цвят: #fff; поплавък: наляво; позиция: относителна; отгоре: 30px; граничен радиус: 25px; фон: url (images / quotationmark.png) -3px -3px #ddd; дисплей: блок; височина: 25px; ширина: 25px;  blockquote: след content: ""; размер на шрифта: 24pt; text-align: center; височина на линията: 42px; цвят: #fff; поплавък: десен; позиция: относителна; дъно: 40px; граничен радиус: 25px; фон: url (images / quotationmark.png) -1px -32px #ddd; дисплей: блок; височина: 25px; ширина: 25px;

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

Комбиниране с псевдокласи

Въпреки че те са различен вид псевдо, можем да използваме псевдо-класовете заедно с псевдо-елементи заедно в едно CSS правило, например, ако искаме да обърнем фон на кавички малко по-тъмна, когато преминем върху блоков цитат.

 blockquote: hover: after, blockquote: hover: Преди цвят на фона: # 555;

Добавяне на ефект на преход

Можем дори да приложим преход собственост върху тях, за да създадат грациозен ефект на цветовия преход.

 преход: всички 350ms; -о-преход: всички 350ms; -moz-transition: всички 350ms; -webkit-transition: всички 350ms;

За съжаление обаче преходният ефект изглежда работи само в най-новата версия на Firefox. Надяваме се, че повече браузъри ще наваксат, за да позволят на преходния имот да бъде приложен псевдо-елементи в бъдеще.

Демонстрация
Изтеглете Източник

Още вдъхновение

За да ви вдъхновим, сме избрали три интересни примера, които могат да ви дадат идеи за вашия уеб дизайн.

Очарователни сенки

В този урок Пол Ъндърууд обясни как да създаде по-реалистичен и завладяващ ефект на сянката :преди и :след псевдо-елементи. И двамата са позиционирани абсолютно и поставени в най-задната част отрицателен Z-индекс стойност.

Ефект на подредени изображения

Използвайки псевдо-елементи Възможно е също така създаването на разхвърлян графичен ефект само с едно изображение. Най- псевдо-елементи се използва за създаване на илюзия за подредените изображения в задната част на действителното изображение, използвайки отрицателен Z-индекс.

заключение

Pseudo-елементи е просто “готино” и в крайна сметка използваем, основно имаме два бонус елемента за всеки елемент, който добавяме, без да се намесваме в действителната структура на HTML, и след това да ги превърнем в почти всичко, което можем да си представим.

Всъщност има някои подобрения псевдо-елементи в момента се работи, като например гнездящи псевдо-елементи div :: before :: before content: "; и множество псевдоелементи div: before (3) content: "; което очевидно ще отвори много повече възможности в практиката за уеб дизайн в бъдеще. Докато те се изпълняват в настоящите браузъри, нека сега изчакаме търпеливо.