Псевдоелементите са един от най-усъвършенстваните селектори, които са достъпни за използване в CSS. Основната цел зад тези селектори е да създаде уникален стил, без да променя HTML документа, който се използва за създаване на основната структура на дадена уеб страница.

Ето как да използвате псевдоелементи в CSS.

Общи псевдоелементи

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

• Преди
• След
• Фон
• Първа линия
• Първа буква

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

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

selector:: pseudo-element {
/ * css код * /
} 

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

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

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

Макар и да е невъзможно, е трудно да се наслагват изображения с четим текст в CSS. Това е най-вече защото изображението и текстът ще заемат една и съща позиция на уеб страница.

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

Единственият проблем е, че тъй като изображението и текстът заемат една и съща позиция, текстът също ще стане донякъде прозрачен.

Един от малкото ефективни начини за решаване на този проблем е използването на псевдоелемента преди.

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

.landingPage {
/ * Подрежда текста върху наслагването на изображението * /
дисплей: flex;
flex-direction: колона;
justify-content: център;
align-items: център;
подравняване на текст: център;
/ * настройва страницата да се адаптира към различни размери на екрана * /
височина: 100vh;
}
.landingPage:: преди {
съдържание: '';
/ * импортира изображение * /
фон: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
център / капак без повторение;
/ * поставя наслагване върху изображението * /
непрозрачност: 0,4;
/ * прави изображението видимо * /
позиция: абсолютна;
отгоре: 0;
ляво: 0;
ширина: 100%;
височина: 100%;
}

Кодът по-горе е създаден, за да се използва в унисон с HTML целевия клас клас по-долу. Както е показано в горния код, като използваме псевдоелемента before, можем да насочим изображението и да използваме свойството opacity върху него, преди изображението да се комбинира с текста.

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


Това е резултат от използването на псевдоелемента преди
за наслагване и изображение с четим текст.

Това ще доведе до поставяне на наслагване върху изображението и изчистване на текста отгоре, както е показано на изображението по-долу:

Използване на елемента After Pseudo в CSS

Практическо използване на псевдоелемента after е да подпомогне създаването на HTML форма. Повечето формуляри се създават с набор от полета, които изискват данни за формуляра да бъдат изпратени успешно.

Един от начините да се посочи, че полето във формуляр изисква данни е чрез поставяне на звездичка след етикета за това поле. Псевдоелементът after предоставя практически начин за това.

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

.required:: след {
съдържание: '*';
цвят: червен;
} 

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

Съдържанието на съдържанието

Както е показано в примера за псевдоелементи по-горе, свойството content е инструментът, който се използва за вмъкване на ново съдържание в уеб страница. Това свойство се използва само с псевдоелементите преди и след.

Важно е да се отбележи, че дори ако няма налично съдържание, което да бъде подадено към свойството на съдържанието (като в предишния пример за псевдоелемент по-горе), все още се изисква да използвате свойството content в рамките на параметрите на псевдоелемента преди или след, за да ги накарате да работят като по предназначение.

Сега можете да използвате псевдоелементи в CSS

В тази статия научихте как да идентифицирате и използвате псевдоелементи във вашите CSS програми. Запознахте се с псевдоелементите преди и след и ви дадоха практически начини да използвате и двете. Също така успяхте да разберете защо свойството content е необходимо за успешното използване на псевдоелементите преди и след.

10 прости примера за CSS кодове, които можете да научите за 10 минути

Искате ли да научите повече за използването на CSS? Опитайте тези основни примери за CSS код, за да започнете, след което ги приложете към вашите собствени уеб страници.

Прочетете Напред

За автора