Pseudoelement CSS jest wykorzystywany do stylizowania części określonego elementu. Na przykład można go użyć do wstawienia zawartości przed lub po stylu pierwszej linii lub litery elementu. Aby to zrobić, stosowane są przed i po pseudoelementach.

Ten blog poinstruuje Cię o CSS ”zanim" I "Po”Selektory. Ale wcześniej omówimy składnię pseudoelementów.

Jak używać „pseudoelement” w CSS?

Składnia pseudoelementu jest wspomniana poniżej:

Selektor :: pseudoelement
Właściwości CSS…

Tutaj:

• "Selektor": Elementy HTML, które chcemy stylizować w CSS, są wybierane za pomocą selektorów CSS. Te selektory mogą być selektorami identyfikatorami, selektorami elementów, selektorami klas lub więcej.
• "Pseudoelement”: Pseudoelement jest wykorzystywany do stylizowania części określonego elementu. Może być wcześniej, po pierwszej linii, pierwszej liście lub więcej.
• "Właściwości CSS”: Te właściwości można wykorzystać do stylizowania dodanej treści.

Przykład

Pierwszym krokiem jest stworzenie nowego Div z klasą „główny". W ramach tego elementu Div obejmują

I

Elementy, aby dodać trochę treści do strony internetowej:

Witaj świecie!

Linuxhint to najlepsza strona internetowa samouczka.

Dołącz do naszej społeczności

Piszemy artykuły i tworzymy filmy, aby edukować świat online.

Styl przed elementem „H2”

H2 :: przed
Content: "->";
Zielony kolor;

„„H2 :: przed”Odnosi się do dodawania stylu do przedtem elementu H2 o następujących właściwościach:

• "treść”Właściwość określa zawartość wstawioną do elementu.
• "kolor„Właściwość jest wykorzystywana do ustawienia koloru tekstu elementu.

Style „P”

.Main P
Rozmiar czcionki: 20px;

„„.Main p”Odnosi się do elementu P głównej div. Jego rozmiar czcionki jest ustawiony na 20px za pomocą „rozmiar czcionki" nieruchomość.

Oto wynik powyższego kodu:

Jak widzimy, każdy element H1 w pliku HTML jest określony z symbolem.

Oto lista treści, którą można określić we właściwości treści:

• "Przerwa linii”: Aby wstawić przerwę linii, użyj„\A" postać
• "Nic”: Jest określony jako puste odwrócone przecinki i jest przydatny podczas wstawienia obrazów tła.
• "Obraz”: Aby wstawić obraz do właściwości treści, określamy„ URL ”obrazu.
• "Ciąg”: Znaki specjalne muszą być zakodowane jako jednostka Unicode.

Jak dodać element GIF „przed”?

Możemy również dodawać GIF lub obrazy przed lub po elementach. Spójrz na poniższy przykład.

Styl przed elementem „H1”

h1 :: przed
Image tła: URL (/gify/uśmiech.GIF);
Rozmiar tła: 50px;
Powtórzenie tła: bez powtórzenia;
Wyświetlacz: Block Inline;
szerokość: 50px;
Wysokość: 50px;
treść: "";

„„H1 :: przed”Odnosi się do stylu wstawki przed elementem H1. Następujące właściwości są stosowane do obiektu wstawionego przed elementem H1:

• "zdjęcie w tle„Własność określa adres URL GIF.
• "Rozmiar tła„Właściwość jest wykorzystywana do określenia rozmiaru tła. S
• "powtarzanie tła„Właściwość określa, w jaki sposób obrazy są powtarzane.
• "wyświetlacz„Własność o wartości”Block wbudowany”Pozwala określić wysokość i szerokość elementu.
• "szerokość”Właściwość ustawia szerokość elementu HTML.
• "wysokość”Właściwość ustawia wysokość elementu HTML.
• "treść„Właściwość jest wykorzystywana do wstawienia wygenerowanej zawartości w połączeniu z pseudo-selektorami.

Styl „główny” div

.główny
kolor tła: RGB (245, 245, 44);
Wyściółka: 5px;

„„.główny„Klasa elementu DIV jest stylizowana z wymienionymi właściwościami:

• "kolor tła„Właściwość jest wykorzystywana do określenia koloru tła elementu.
• "wyściółka„Własność służy do ustawiania przestrzeni na zawartości T lub wewnątrz granicy.

Można zauważyć, że GIF jest umieszczany przed każdym elementem H1:

Jak wstawić symbole „po” określonych elementach?

Pseudo-srektor ”::Po”Jest wykorzystywany do wstawienia zawartości po elemencie. Poniższy przykład pokazuje pseudo-electora.

Przykład

Utwórz nowy element DIV z „główny" klasa. Wewnątrz tego elementu, dodaj

I

Elementy, aby dodać trochę treści do strony internetowej:

Html

Hipertekstowy język znaczników

CSS

Arkusz Stylów Kaskadowych

Styl po elemencie „H2”

H2 :: po
treść: "*";
kolor czerwony;
Rozmiar czcionki: 30px;

„„H2 :: po”Odnosi się do elementu H2. Poniżej znajdują się właściwości, które są do niego stosowane:

• "treść”Właściwość określa zawartość wstawioną do elementu.
• "kolor„Własność jest wykorzystywana do zdefiniowania koloru czcionki.
• "rozmiar czcionki„Właściwość jest wykorzystywana do ustawienia rozmiaru czcionki elementu.

Style „P”

.główny content p
Rozmiar czcionki: 20px;

Rozmiar czcionki elementu P głównej div Contrent jest określony przy użyciu „rozmiar czcionki" nieruchomość.

Wyjście powyższego fragmentu kodu pokazano poniżej:

Z powodzeniem dowiedzieliśmy się o CSS przed i po selektorach w CSS.

Wniosek

W CSS pseudoelementy są wykorzystywane do określania niektórych właściwości stylizacji do części elementu. Na przykład „„::zanim" I "::Po”Określone elementy są wykorzystywane do dodawania stylu odpowiednio przed i po żądanym elemencie. Ten blog pokazał użycie CSS przed i po selektorach.