Как да използвате преди и след псевдоелементи в CSS

Как да използвате преди и след псевдоелементи в CSS

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





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



къде мога да отида да отпечатам нещо

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

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





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

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

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


selector::pseudo-element{
/* css code */
}

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



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

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

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



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

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



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

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


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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





This is the result of using the before pseudo-element
to overlay and image with readable text.


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

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

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

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

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


.required::after{
content: '*';
color: red;
}

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

как да променя gmail акаунта по подразбиране

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

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

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

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

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

Дял Дял Туит електронна поща 10 прости примера за CSS код, които можете да научите за 10 минути

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

Прочетете Напред Свързани теми
  • Програмиране
  • Уеб дизайн
  • CSS
За автора Кадейша Кийн(21 статии са публикувани)

Кадейша Кийн е разработчик на софтуер с пълен стек и технически/технологичен писател. Тя има отличителната способност да опростява някои от най -сложните технологични концепции; производство на материал, който може лесно да бъде разбран от всеки начинаещ в технологиите. Тя е запалена по писането, разработването на интересен софтуер и пътуването по света (чрез документални филми).

Още от Kadeisha Kean

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате