Zrozumienie pseudo-elementu przed i po

Cascading Style Sheet (CSS) jest głównie przeznaczony do stosowania stylów do znaczników HTML, jednak w niektórych przypadkach, gdy dodanie dodatkowego znacznika do dokumentu jest zbędne lub niemożliwe, w rzeczywistości istnieje funkcja w CSS, która pozwala nam dodawać dodatkowe znaczniki bez zakłócania rzeczywisty dokument, a mianowicie pseudoelementy.

Słyszeliście o tym terminie, zwłaszcza gdy śledziliście niektóre z naszych tutoriali.

W rzeczywistości jest kilku członków rodziny CSS sklasyfikowanych jako pseudoelementy tak jak :Pierwsza linia, : pierwsza litera, ::wybór, :przed i :po. Ale w tym artykule ograniczymy nasze pokrycie tylko do :przed i :po, “pseudoelementy” tutaj będzie odnosić się do obu z nich. Przyjrzymy się temu konkretnemu tematowi od podstaw.

Obsługa składni i przeglądarki

The pseudoelementy faktycznie istnieje od tego czasu CSS1, ale :przed i :po o których tutaj rozmawiamy zostały wydane w CSS2.1. Na początku pseudoelementy użyj pojedynczego dwukropka dla składni, a następnie, gdy sieć ewoluowała, w CSS3 pseudoelementy zostały zmienione, aby używać podwójnego dwukropka ::przed & ::po - odróżnić go od pseudoklasy (to znaczy. :wahać się, :aktywny, i tak dalej).

Jednak niezależnie od tego, czy używasz formatu dwukolonkowego, czy dwukropkowego, przeglądarki nadal będą rozpoznawać. A ponieważ Internet Explorer 8 obsługuje tylko format pojedynczego dwukropka, bezpieczniej jest używać dwukropka, jeśli chcesz większej kompatybilności z przeglądarką.

Co to robi?

Krótko mówiąc, pseudoelementy wstawi dodatkowy element przed lub po element zawartości, więc kiedy dodamy je oba, są technicznie równi, z następującym znacznikiem.

:przed To główna treść. :po

Ale te elementy nie są generowane w dokumencie. Nadal są widoczne na powierzchni, ale nie znajdziesz ich w źródle dokumentu, więc praktycznie są imitacja elementy.

Używanie pseudoelementów

Za pomocą pseudoelementy jest stosunkowo łatwy; następująca składnia selektor: wcześniej doda element przed selektor treści podczas tej składni selektor: po dodamy po nim i aby dodać do nich zawartość możemy użyć zawartość własność.

Na przykład poniższy fragment doda znak cudzysłowu przed i po zablokować cytat.

 blockquote: before content: open-quote;  blockquote: after content: close-quote;

Stylizowanie pseudoelementów

Pomimo, że jest fałszywym elementem, pseudoelementy faktycznie zachowuję się jak “real” element; jesteśmy w stanie dodać do nich dowolne deklaracje stylów, takie jak zmiana koloru, dodanie tła, dostosowanie rozmiaru czcionki, wyrównanie tekstu wewnątrz i tak dalej.

 blockquote: before content: open-quote; rozmiar czcionki: 24pt; wyrównywanie tekstu: środek; line-height: 42px; kolor: #fff; background: #ddd; float: left; pozycja: względna; top: 30px;  blockquote: after content: close-quote; rozmiar czcionki: 24pt; wyrównywanie tekstu: środek; line-height: 42px; kolor: #fff; background: #ddd; float: dobrze; pozycja: względna; bottom: 40px;

Określanie wymiaru

Wygenerowane elementy są domyślnie elementem poziomu śródliniowego, więc gdy zamierzamy określić wysokość i szerokość, musimy najpierw zdefiniować go jako element bloku przy użyciu Blok wyświetlacza deklaracja.

 blockquote: before content: open-quote; rozmiar czcionki: 24pt; wyrównywanie tekstu: środek; line-height: 42px; kolor: #fff; background: #ddd; float: left; pozycja: względna; top: 30px; border-radius: 25px; / ** zdefiniuj go jako element blokowy ** / display: block; wysokość: 25px; szerokość: 25px;  blockquote: after content: close-quote; rozmiar czcionki: 24pt; wyrównywanie tekstu: środek; line-height: 42px; kolor: #fff; background: #ddd; float: dobrze; pozycja: względna; bottom: 40px; border-radius: 25px; / ** zdefiniuj go jako element blokowy ** / display: block; wysokość: 25px; szerokość: 25px;

Dołącz obraz tła

Możemy również zastąpić zawartość obrazem, a nie tylko zwykłym tekstem. Chociaż zawartość nieruchomość zapewnia url () łańcuch do wstawienia obrazu, ale w większości przypadków wolę używać tło właściwość dla większej kontroli nad dołączonym obrazem.

 blockquote: before content: ""; rozmiar czcionki: 24pt; wyrównywanie tekstu: środek; line-height: 42px; kolor: #fff; float: left; pozycja: względna; top: 30px; border-radius: 25px; background: url (images / quotationmark.png) -3px -3px #ddd; Blok wyświetlacza; wysokość: 25px; szerokość: 25px;  blockquote: after content: ""; rozmiar czcionki: 24pt; wyrównywanie tekstu: środek; line-height: 42px; kolor: #fff; float: dobrze; pozycja: względna; bottom: 40px; border-radius: 25px; background: url (images / quotationmark.png) -1px -32px #ddd; Blok wyświetlacza; wysokość: 25px; szerokość: 25px;

Jak jednak widać z powyższego fragmentu, nadal deklarujemy zawartość właściwość i tym razem z pustym łańcuchem. The zawartość nieruchomość jest wymóg i powinien być zawsze stosowany; w przeciwnym razie pseudoelement nie będzie działać w ogóle.

Łączenie z pseudoklasami

Chociaż są innego rodzaju rzekomy, możemy użyć pseudoklasy wraz z pseudoelementy na przykład w jednej regule CSS, jeśli chcemy włączyć tło cudzysłowu trochę ciemniej, gdy najeżdżamy na zablokować cytat.

 blockquote: hover: after, blockquote: hover: before background-color: # 555;

Dodawanie efektu przejścia

I możemy nawet zastosować przejście własność, aby stworzyć zgrabny efekt przejścia kolorów.

 przejście: wszystkie 350ms; -o-przejście: wszystkie 350ms; -moz-transition: wszystkie 350ms; -webkit-transition: wszystkie 350ms;

Niestety efekt przejścia działa tylko w najnowszej wersji Firefoksa. Mam nadzieję, że więcej przeglądarek nadrobi zaległości, aby umożliwić zastosowanie właściwości przejścia pseudoelementy w przyszłości.

Próbny
Pobierz źródło

Więcej inspiracji

Aby Cię zainspirować, wybraliśmy trzy fajne przykłady, które mogą dać Ci pomysły na Twój projekt internetowy.

Fascynujące cienie

W tym samouczku Paul Underwood wyjaśnił, jak stworzyć bardziej realistyczny i fascynujący efekt cienia :przed i :po pseudoelementy. Oba są umieszczone absolutnie i umieszczone z tyłu negatywny indeks Z wartość.

Efekt skumulowanego obrazu

Używając pseudoelementy możliwe jest również tworzenie niechlujnego skumulowanego efektu obrazu tylko z pojedynczym obrazem na znaczniku. The pseudoelementy służy do tworzenia iluzji ułożonych obrazów z tyłu rzeczywistego obrazu przy użyciu negatywu indeks Z.

Wniosek

Pseudo-elementy jest po prostu “fajne” i ostatecznie użyteczne, w zasadzie mamy dwa dodatkowe elementy dla każdego elementu, który dodamy bez zakłócania rzeczywistej struktury HTML, a następnie przekształcenia ich w prawie wszystko, co możemy sobie wyobrazić.

W rzeczywistości istnieją pewne ulepszenia pseudoelementy nad którym obecnie pracujemy, na przykład zagnieżdżanie pseudoelementów div :: before :: before content: "; i wiele pseudoelementów div :: before (3) content: "; co oczywiście otworzy znacznie więcej możliwości w praktyce projektowania stron internetowych w przyszłości. Chociaż są one implementowane w obecnych przeglądarkach, poczekajmy cierpliwie.