Jak używać pseudoelementów przed i po w CSS

Jak używać pseudoelementów przed i po w CSS

Pseudoelementy są jednym z bardziej zaawansowanych selektorów dostępnych do użycia w CSS. Głównym celem tych selektorów jest tworzenie unikalnych stylów bez zmiany dokumentu HTML, który jest używany do tworzenia podstawowej struktury danej strony internetowej.





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



jak przenieść foldery z jednego dysku Google na inny?

Wspólne pseudoelementy

Istnieje obszerna lista pseudoelementów, które ułatwiają życie programistom internetowym. Niektóre z tych pseudoelementów obejmują:





  • Przed
  • Później
  • 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 używania dowolnego pseudoelementu.

Przykład struktury pseudoelementów


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

Chociaż możesz użyć 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.

Używanie pseudoelementu Before w CSS

Choć 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.



Stosunkowo łatwo jest wyślij obrazek na tło grupy tekstu , ale gdy obraz jest zbyt jasny, przytłacza tekst, który się na nim znajduje. W takich przypadkach następnym krokiem jest próba uczynienia obrazu mniej nieprzezroczystym przy użyciu właściwości opacity.

Jedyny problem polega na tym, że skoro 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”


.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%;
}

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





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


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

Używanie 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. Pseudo-element after zapewnia praktyczny sposób na zrobienie tego.

Korzystanie z przykładu pseudoelementu po


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

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 zawsze jest idealne w przypadku tworzenia oprogramowania).

jak przełączyć się na starego Gmaila

Właściwość treści

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 before i after.

Należy pamiętać, że nawet jeśli nie ma dostępnej treści, którą można by przekazać do właściwości content (tak jak w powyższym przykładzie pseudoelementu before), nadal wymagane jest użycie właściwości content w ramach parametrów przed lub po pseudo-element, aby działały zgodnie z przeznaczeniem.

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

W tym artykule dowiedziałeś się, jak identyfikować i używać pseudoelementów w swoich programach CSS. Zostałeś wprowadzony do pseudoelementów „przed” i „po” i dano Ci praktyczne sposoby wykorzystania obu. Mogłeś również zobaczyć, dlaczego właściwość content jest niezbędna do pomyślnego użycia pseudoelementów przed i po.

Udział Udział Ćwierkać E-mail 10 prostych przykładów kodu CSS, których możesz się nauczyć w 10 minut

Potrzebujesz pomocy z CSS? Wypróbuj te podstawowe przykłady kodu CSS na początek, a następnie zastosuj je na swoich stronach internetowych.

Czytaj dalej Powiązane tematy
  • Programowanie
  • Projektowanie stron
  • CSS
O autorze Kadeisha Kean(21 opublikowanych artykułów)

Kadeisha Kean jest programistą zajmującym się pełnymi stosami oprogramowania i pisarzem technicznym/technologicznym. Ma wyraźną umiejętność upraszczania niektórych z najbardziej złożonych koncepcji technologicznych; produkcja materiału, który może być łatwo zrozumiały dla każdego nowicjusza w dziedzinie technologii. Pasjonuje się pisaniem, tworzeniem ciekawego oprogramowania i podróżowaniem po świecie (poprzez filmy dokumentalne).

Więcej od Kadeishy Kean

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować