Псеудо-елементи су један од напреднијих селектора који су доступни за употребу у ЦСС-у. Главна сврха ових селектора је стварање јединственог стила, без мењања ХТМЛ документа који се користи за креирање основне структуре дате веб странице.

Ево како се користе псеудо-елементи у ЦСС-у.

Уобичајени псеудо-елементи

Постоји опсежна листа псеудо-елемената који су доступни за олакшавање живота веб програмера. Неки од ових псеудо-елемената укључују:

• пре него што
• После
• Позадина
• Прва линија
• Прво слово

У одређеним ситуацијама показаће се да су неки псеудо-елементи погоднији од других, али једна ствар која остаје константна је општа структура за употребу било ког псеудо-елемента.

Пример структуре псеудо-елемената

селецтор:: псеудо-елемент {
/ * цсс код * /
} 

Иако можеш користите ХТМЛ елемент као селектор, препоручује се да користите класу или ИД како бисте избегли циљање нежељених елемената у вашем распореду. Елемент, стил или подаци које желите да уметнете на жељену позицију треба да буду смештени између коврџавих заграда.

Псеудо-елементи пре и после су најпопуларнији на листи, а с обзиром на то да постоји много практичних начина да се користе - није тешко разумети зашто.

Употреба елемента Бефоре Псеудо у ЦСС-у

Иако није немогуће, у ЦСС је тешко преклопити слике читљивим текстом. То је углавном због тога што би слика и текст заузимали исти положај на веб страници.

То је релативно лако послати слику у позадину групе текста, али када је та слика пресветла, има тенденцију да превлада текст који је на њој. У овим случајевима, следећи корак је покушај да се слика учини мање непрозирном помоћу својства опацити.

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

Један од ретких ефикасних начина за решавање овог проблема је коришћење псеудо-елемента бефоре.

Коришћење примера Пре псеудо-елемента

.почетне странице{
/ * Распоређује текст на прекривачу слике * /
дисплеј: флек;
флек-правац: колона;
јустифи-цонтент: центар;
алигн-итемс: центер;
поравнање текста: центар;
/ * подешава страницу да се прилагоди различитим величинама екрана * /
висина: 100вх;
}
.ландингПаге:: бефоре {
садржај: '';
/ * увози слику * /
бацкгроунд: урл ( https://source.unsplash.com/_1EYIHRG014/1600x900)
центар / поклопац без понављања;
/ * поставља прекривач на врх слике * /
непрозирност: 0,4;
/ * чини слику видљивом * /
позиција: апсолутна;
топ: 0;
лево: 0;
ширина: 100%;
висина: 100%;
}

Горњи код је створен да се користи у сагласности са доље наведеном ХТМЛ одредишном страницом. Као што је приказано у горњем коду, помоћу псеудо-елемента бефоре можемо циљати слику и користити својство непрозирности на њој пре него што се слика комбинује са текстом.

Коришћење псеудо-елемента Бефоре


Ово је резултат употребе псеудо-елемента бефоре
за прекривање и слику читљивим текстом.

То ће резултирати преклапањем на слици и јасним текстом на врху, као што је приказано на доњој слици:

Коришћење Афтер Псеудо-елемента у ЦСС-у

Практична употреба псеудо-елемента афтер је помоћ у стварању ХТМЛ обрасца. Већина образаца се креира са скупом поља која захтевају податке за успешно подношење обрасца.

Један од начина да се означи да поље у обрасцу захтева податке је постављање звездице после ознаке за ово поље. Псеудо-елемент афтер пружа практичан начин да то урадите.

Коришћење примера Афтер Псеудо-елемент

.рекуиред:: афтер {
садржај: '*';
боја црвена;
} 

Уметањем горњег кода у ЦСС одељак вашег обрасца осигураће се да ће сваку ознаку која садржи тражену класу директно пратити црвена звездица. Псеудо-елемент афтер је такође практичан у овом примеру, јер помаже да се стил одвоји од структуре (што је увек идеално у развоју софтвера).

Својство садржаја

Као што је приказано у примеру псеудо-елемента афтер, својство цонтент је алат који се користи за уметање новог садржаја на веб страницу. Ово својство се користи само са псеудо-елементима пре и после.

Важно је напоменути да чак и ако нема расположивог садржаја који би се могао додати у својство садржаја (као у претходном примеру псеудо-елемента горе), и даље ћете морати да користите својство садржаја унутар параметара псеудо-елемента пре или после да бисте их натерали да раде као намењен.

Сада можете да користите псеудо-елементе у ЦСС-у

У овом чланку сте научили како да идентификујете и користите псеудо-елементе у својим ЦСС програмима. Упознали сте се са псеудо-елементима пре и после и дали сте практичне начине за употребу оба. Такође сте могли да видите зашто је својство садржаја неопходно за успешну употребу псеудо-елемената пре и после.

10 једноставних примера ЦСС кода које можете научити за 10 минута

Желите да сазнате више о коришћењу ЦСС-а? Испробајте ове основне примере ЦСС кода за почетак, а затим их примените на сопствене веб странице.

Прочитајте следеће

О аутору