JavaScript CSS po

| | | | | | | | | | | | | | | | | | | | | | | | | | | | |

CSS:: przed zawartością zaznaczenia wstawia się przed wybranym elementem. CSS: po zawartości wstawek po określonym elemencie. Te selektory są powszechnie używane do dodawania tekstu przed lub po akapicie lub łączu.

Podczas projektowania witryny internetowej możesz dodać treść przed lub po treści na stronie. element. Na przykład możesz dodać obraz przed każdym punktorem na liście.

Tutaj:: przed i po:: pojawiają się elementy pseudo-CSS. Te pseudoelementy umożliwiają wstawianie treści przed lub po zawartości elementu.

W tym samouczku omówimy, odwołując się do przykładów, jak używać pseudoelementów:: before i after:: do dekorowania zawartości strony internetowej. Zanim skończysz czytać ten samouczek, będziesz ekspertem w używaniu pseudoelementów: przed i po: w CSS.

Pseudoelementy CSS

Pseudo-elementy element to specjalne słowo kluczowe, które umożliwia stylizowanie określonej części elementów wybranych przez selektor CSS. W tym artykule pseudoelementy będziemy nazywać selektorami, ponieważ każdy pseudoelement jest selektorem

Pseudoelementy są przydatne, gdy chcesz nadać styl elementowi bez dodawania CSS lub identyfikator klas do elementu. Na przykład, jeśli chcesz dodać strzałkę „>” po każdym linku na stronie internetowej, możesz użyć pseudoelementu.

CSS oferuje szeroką gamę pseudoelementów. W szczególności:: pierwszy wiersz,:: pierwsza litera,:: przed i po::. Na potrzeby tego samouczka skupimy się na dwóch ostatnich::::: przed i po.

Pseudoelementy są zazwyczaj reprezentowane za pomocą dwukropków (::). Chociaż CSS3 obsługuje użycie składni z pojedynczą kropką (:) do deklarowania pseudoelementu, najlepszą praktyką jest użycie notacji dwukropkowej

Dzieje się tak, ponieważ notacja dwukropek służy do rozróżniania symboli zastępczych pseudoklas.

CSS:: przed elementem pseudoelementu

It:: przed pseudo-l "dodaje treść, która pojawia się przed elementem na strona internetowa Często ten element jest używany do dołączenia tekstu przed akapitem

składnia:: przed pseudoelementem to: ..

:: przed selektorem jest dodawany po nazwie elementu, do którego chcesz zastosować selektor

Oto główne elementy frontu:: pseudo-element:

Jeśli chcesz dowiedzieć się więcej o działaniu selektorów w CSS, przeczytaj nasz przewodnik Selektory CSS .

Weźmy przykład, aby zademonstrować, jak działa:: przed pseudoelementem.

Załóżmy, że chcemy dodać link emoji (Ôîó) przed każdym linkiem na przykładowej stronie internetowej. Możemy to zrobić za pomocą następującego kodu:

Nasz kod zwraca:

Capture d

Zrobiliśmy to, określając właściwość content w naszym pliku CSS, która wygląda tak:

content: "Ôîó";

Nasza reguła dodała link emoji na początku naszego tagu , który utworzyliśmy

wartością atrybutu „treść” może być:.

Nie można wstawić elementu HTML do atrybutu content.

CSS:: after pseudo-element

CSS:: after pseudo-element umożliwia dodawanie treści natychmiast po element na stronie internetowej. Podobnie jak:: przed selektorem, after:: jest często używany z linkami lub akapitami tekstu.

Th Składnia p seudo-element:: występuje po:

: : po składnia jest taka sama jak składnia dla:: przed pseudoelementem.:: przyjmuje po tych samych wartościach ‚Ęã‚Ęã dla atrybutu "content", o którym mówiliśmy wcześniej

:: za przykładem CSS

Załóżmy, że projektujesz link na stronie dla piekarni o nazwie Hansons Bakery. Ten link powinien wyświetlać tekst „Przejdź do strony Strona główna Piekarnia Hansons”. Nasz link powinien być otoczony czarną ramką o szerokości 1 piksela.

Po naszej etykiecie chcemy umieścić tekst pole do wyświetlenia z treścią Na tej stronie nasze menu wypieków . (Zwróć uwagę na spację przed słowem „To”). Nasze pudełko powinno mieć pomarańczowy kolor tła HTML .

Możemy to zrobić za pomocą następującego kodu:

Nasz kod wygenerował treść podobną do tej:

< class figure = "wp-bloc-image"> Capture of 2020 12 09 08 00 47 1