Podczas opracowywania strony internetowej programiści często spotykają się z sytuacjami, w których konieczne jest stylizowanie określonej części elementu lub dodania określonych treści przed lub po konkretnym elemencie. Wszystkie takie zadania można wykonać przy użyciu pseudoelementów dostarczanych w CSS. Ten post nauczy Cię wszystkiego o pseudoelementach.

W tym poście przejrzysz następujące tematy.

1. Jakie są pseudoelementy w CSS
2. :: Pierwszy liter
3. ::Pierwsza linia
4. ::zanim
5. ::Po
6. ::wybór

Jakie są pseudoelementy w CSS

Pseudoelementy to słowa kluczowe, które są używane do stylizacji określonej części określonego elementu. Są one wstawiane do selektora, gdy elementy stylistyczne. Na przykład chcesz podać kolor pierwszej litery elementu lub chcesz dodać tekst przed określonym elementem.

Składnia

selektor :: pseudoelement
wartość nieruchomości;

Tutaj podkreśliliśmy niektóre z ważnych pseudoelementów dla lepszego zrozumienia.

:: Pierwszy liter

Służy to do nadania określonego stylu pierwszej litery jakiegoś tekstu, a ponadto jest stosowany tylko na elementach na poziomie bloków. Obsługuje wiele właściwości CSS, takich jak kolor, czcionka, margines, granica, wyściółka, tło itp.

Przykład

Postępuj zgodnie z poniższym kodem, aby zrozumieć, jak działa ten element.

Html

Pseudoelementy

Tutaj zdefiniowaliśmy

element.

CSS

H1 :: pierwsza litera
Kolor: Sandybrown;
Styl czcionki: Kursywa;
Rozmiar czcionki: 50px;

Dajemy kolor Sandybrown, styl czcionki kursywnej i rozmiar czcionki 50px do pierwszej litery nagłówka za pomocą pseudoelement.

Wyjście

Pierwsza litera nagłówka została stylizowana przy użyciu pseudoelement.

::Pierwsza linia

Jak sama nazwa wskazuje, służy to do nadania pewnego stylu pierwszego wiersza tekstu, a także ma zastosowanie tylko w elementach na poziomie bloków. Obsługuje niektóre właściwości CSS, które są kolorami, czcionką, tłem itp.

Przykład

Załóżmy, że chcesz nadać trochę koloru, stylu i wagi pierwszej linii

element. Postępuj zgodnie z poniższym kodem.

Html

Jak sama nazwa wskazuje, ten pseudoelement jest używany do stylizacji pierwszego wiersza tekstu. Ten element można również zastosować tylko do elementów na poziomie blokowym. Obsługuje niektóre właściwości CSS, które są kolorami, czcionką, tłem itp.

W powyższym kodzie zdefiniowaliśmy

element i dodał w nim trochę tekstu.

CSS

P :: pierwsza linia
kolor fioletowy;
Styl czcionki: Kursywa;
Font-Weight: Bold;

Korzystanie z pseudoelementu pierwszego rzutu dajemy trochę koloru, stylu czcionki i czcionki do pierwszej linii akapitu.

Wyjście

Pierwsza linia akapitu została pomyślnie stylizowana.

::zanim

W celu dodania treści przed określoną częścią elementu :: Przed użyciem pseudoelementu. Obsługuje właściwość CSS Content.

Przykład

Załóżmy, że chcesz dodać cudzysłowy na początku akapitu. Użyj następującego kodu.

Html

To jest akapit.

Tutaj definiujemy nasz akapit, zanim wszyscy dodamy znak cytatu.

CSS

P :: przed
treść: '"';
kolor niebieski;
Rozmiar czcionki: 25px;

W powyższym kodzie dodajemy znak cytatu przed akapitem i nadajemy mu kolor niebieski i ustawiamy jego rozmiar na 25px za pomocą :: przed pseudoelementem.

Wyjście

Cytat został pomyślnie dodany za pomocą :: przed pseudoelementem.

::Po

Działa to w podobny sposób do :: Przed pseudoelement. Ten element jest również używany z właściwością treści CSS.

Przykład

Postępuj zgodnie z poniższym przykładem, aby zrozumieć działanie :: po pseudoelement.

Html

Kaskadowe arkusze stylów

Tutaj określiliśmy

element i dodał do niego trochę treści.

CSS

H1 :: po
treść: „(pseudoelement)”;
kolor niebieski;
Rozmiar czcionki: 15px;

Dodajemy pewne treści po

Element, nadając temu konkretnej zawartości niebieskiego koloru i ustawianie wielkości czcionki na 15px.

Wyjście

Treść została dodana po nagłówku.

::wybór

Aby stylizować element, który wybierze użytkownik, używany jest pseudoelement ::. Obsługuje niektóre właściwości CSS, które są kolorami, tłem itp.

Przykład

Załóżmy, że chcesz, aby określony element został wyróżniony, gdy użytkownik go wybierze. Postępuj zgodnie z poniższym kodem.

Html

Niektóre nagłówek

Tutaj określamy nagłówek.

CSS

H1 :: Wybór
kolor tła: Hotpink;

W powyższym kodzie używamy pseudoelementu :: Wybór, aby nadać nagłówkowi różowy kolor za każdym razem.

Wyjście

:: Pseudoelement wyboru działa poprawnie.

Wniosek

Pseudoelementy to słowa kluczowe, które są używane do stylizacji określonej części określonego elementu. Istnieją różne pseudoelementy w CSS, jednak niektóre z najważniejszych i powszechnie stosowanych pseudoelementów są; :: Pierwszy liter, ::Pierwsza linia, ::zanim, ::Po, I ::wybór. Każdy z nich jest używany do różnych celów stylizacji, które są szczegółowo wyjaśnione w tym poście wraz z pomocą odpowiednich przykładów.