Pseudoelementy to jedne z bardziej zaawansowanych selektorów dostępnych do użycia w CSS. Głównym celem tych selektorów jest stworzenie unikalnego stylu bez zmiany dokumentu HTML, który jest używany do tworzenia podstawowej struktury danej strony internetowej.

Oto jak używać pseudoelementów w CSS.

Wspólne pseudoelementy

Istnieje obszerna lista pseudoelementów, które ułatwiają życie twórcom stron internetowych. Niektóre z tych pseudoelementów obejmują:

• Przed
• Po
• Zasłona
• Pierwsza linia
• Pierwsza litera

W określonych sytuacjach niektóre pseudoelementy okażą się bardziej odpowiednie niż inne, ale jedyną rzeczą, która pozostaje niezmienna, jest ogólna struktura wykorzystania dowolnego pseudoelementu.

Przykład struktury pseudoelementów

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

Chociaż możesz użyj elementu HTML jako selektora, zaleca się użycie klasy lub identyfikatora, aby uniknąć kierowania na niezamierzone elementy w układzie. Element, styl lub dane, które chcesz wstawić w żądanym miejscu, należy umieścić między nawiasami klamrowymi.

Pseudoelementy „przed” i „po” są najbardziej popularne na liście, a biorąc pod uwagę, że istnieje wiele praktycznych sposobów ich wykorzystania - nietrudno zrozumieć, dlaczego.

Korzystanie z pseudoelementu Before w CSS

Chociaż nie jest to niemożliwe, trudno jest nakładać obrazy z czytelnym tekstem w CSS. Dzieje się tak głównie dlatego, że obraz i tekst zajmowałyby tę samą pozycję na stronie internetowej.

Jest to stosunkowo łatwe wyślij obraz na tło grupy tekstu, ale kiedy ten obraz jest zbyt jasny, ma tendencję do przytłaczania tekstu, który się na nim znajduje. W takich przypadkach następnym krokiem jest próba zmniejszenia nieprzezroczystości obrazu za pomocą właściwości krycia.

Jedynym problemem jest to, że ponieważ obraz i tekst zajmują tę samą pozycję, tekst również stanie się nieco przezroczysty.

Jednym z niewielu skutecznych sposobów rozwiązania tego problemu jest użycie pseudoelementu before.

Korzystanie z przykładu przed pseudoelementem

.wstęp{
/ * Porządkuje tekst na nakładce obrazu * /
wyświetlacz: elastyczny;
flex-direction: kolumna;
justify-content: center;
align-items: center;
wyrównywanie tekstu: do środka;
/ * dostosowuje stronę do różnych rozmiarów ekranu * /
wysokość: 100 vh;
}
.landingPage:: before {
zadowolony:'';
/ * importuje obraz * /
background: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
środek / okładka bez powtórzeń;
/ * umieszcza nakładkę na obrazie * /
krycie: 0,4;
/ * sprawia, że ​​obraz jest widoczny * /
pozycja: bezwzględna;
góra: 0;
po lewej: 0;
szerokość: 100%;
wysokość: 100%;
}

Powyższy kod został utworzony do użytku w zgodzie z poniższą klasą HTML landingPage. Jak pokazano w powyższym kodzie, używając pseudoelementu before możemy wskazać obraz i użyć na nim właściwości opacity, zanim obraz zostanie połączony z tekstem.

Korzystanie z pseudoelementu Before


Jest to wynikiem użycia pseudoelementu przed
do nakładki i obrazu z czytelnym tekstem.

Spowoduje to umieszczenie nakładki na obrazie i wyświetlenie czystego tekstu na górze, jak pokazano na poniższym obrazku:

Korzystanie z pseudoelementu After w CSS

Praktycznym zastosowaniem pseudoelementu after jest pomoc w tworzeniu formularza HTML. Większość formularzy jest tworzonych z zestawem pól, które wymagają danych, aby formularz został pomyślnie przesłany.

Jednym ze sposobów wskazania, że ​​pole w formularzu wymaga danych, jest umieszczenie gwiazdki po etykiecie tego pola. Pseudoelement after zapewnia praktyczny sposób na zrobienie tego.

Korzystanie z przykładu After Pseudo-element

.required:: after {
zadowolony: '*';
kolor czerwony;
} 

Wstawienie powyższego kodu do sekcji CSS formularza zapewni, że każda etykieta zawierająca wymaganą klasę będzie bezpośrednio poprzedzona czerwoną gwiazdką. Pseudo-element after jest również praktyczny w tym przykładzie, ponieważ pomaga oddzielić stylizację od struktury (co jest zawsze idealne przy tworzeniu oprogramowania).

Właściwość Content

Jak pokazano w powyższym przykładzie pseudoelementu after, właściwość content jest narzędziem używanym do wstawiania nowej treści na stronę internetową. Ta właściwość jest używana tylko z pseudoelementami przed i po.

Należy zauważyć, że nawet jeśli nie ma treści do przesłania do właściwości content (tak jak w poprzednim przykładzie pseudoelementu powyżej), nadal musisz używać właściwości content w parametrach pseudoelementu before lub after, aby działały jako zamierzony.

Teraz możesz używać pseudoelementów w CSS

Z tego artykułu dowiedziałeś się, jak identyfikować i wykorzystywać pseudoelementy w programach CSS. Zostaliście wprowadzeni w pseudoelementy przed i po i otrzymaliście praktyczne sposoby korzystania z obu. Można było również zobaczyć, dlaczego właściwość content jest niezbędna do pomyślnego użycia pseudoelementów przed i po.

10 prostych przykładów kodu CSS, których możesz się nauczyć w 10 minut

Chcesz dowiedzieć się więcej o używaniu CSS? Wypróbuj na początek te podstawowe przykłady kodu CSS, a następnie zastosuj je na swoich własnych stronach internetowych.

Czytaj dalej

O autorze