TREŚĆ wcześniej w CSS

CSS, ::beforetworzy pseudo który jest pierwszym dzieckiem wybranego elementu. Najczęściej używane do dodawania kosmetycznych element treści z właściwościami content. Domyślnym jest inlaynovym.

/* Добавить сердце перед ссылками */a::before { content: "";}

Uwaga:  Psvedoelementy stworzony przez  ::beforei ::afterzawarte w elemencie urządzenia formatowanie, a zatem nie ma zastosowania do przesuwnych elementów ., Takich jak - elementu HTML opisów graficznych „>  lub (elementu przenoszącego szeregowej) ustala podział wiersza w tekstowym (powrót karetki) , Jest to przydatne przy pisaniu wiersza lub adresu, gdzie ważne podział na linii. „>
.

składnia

/ * Składnia CSS3 * /
::przed
/ * Składni CSS 2 * /
:przed

W CSS 3 nastąpił zapis  ::before (z dwoma średnikami) odróżnić pseudo i pseudoceramidy. Przeglądarka obsługuje również nagrywanie  :before, wprowadzona w CSS2.

przykłady

Dodawanie ofert

Ten prosty przykład użycia pseudo  ::before pozwala na dodawanie cytatów. Tutaj jest on stosowany jako pseudo  ::before, i tak  ::after.

HTML

Kilka cytatów , powiedział: jest lepsze niż nic.

CSS

q :: before {content: „« "; kolor niebieski;
}
q :: after {content: „» "; kolor czerwony;
}

wynik

Przykład projektowania

Można projektować tekst lub obrazy w nieruchomości contentprkaticheski dowolny sposób.

HTML

 Patrz gdzie pomarańczowy prostokąta. 

CSS

.ribbon {background-color: # 5BC8F7;
}
.ribbon :: before {content: "Spójrz na pomarańczowym polu."; background-color: # FFBA10; granicznych kolor czarny; border-style: przerywana;
}

wynik

Lista rzeczy do zrobienia

W tym przykładzie, stworzymy prostą listę rzeczy do zrobienia za pomocą pseudo. Metoda ta jest często stosowana, aby dodać małe poprawki w interfejsie użytkownika i poprawić doświadczenia użytkownika.

HTML

  • Kup Milk
  • Idź na spacer z psem
  • Praca
  • Wpisz kod
  • Słuchaj muzyki
  • Reszta

CSS

li {list-style-type: none; Pozycja: względna; margin: 2px; Wypełnienie: 0.5em 0.5em 0.5em 2em; background: jasnoszary; font-family: sans-serif;
}
li.done {background: # CCFF99;
}
li.done :: before {content: ''; Pozycja: bezwzględne; border-color: # 009933; border-style: ciało stałe; granica szerokości 0 0.3em 0.25em 0; Wysokość: 1 em; top: 1.3em; left: 0.6em; margin-top: -1em; transformacji: obracać (45deg); szerokość: 0.5em;
}

JavaScript

Lista zmienna = document.querySelector (UL ');
list.addEventListener ( 'kliknięcie', funkcja (EV) {if (ev.target.tagName === 'LI') ( '{ev.target.classList.toggle wykonanej');}
}, fałszywe);

Tutaj jest żywym przykładem kodu przedstawionego powyżej. Zauważ, że nie korzysta z ikon oraz zielony znacznik wyboru w rzeczywistości jest pseudo  ::before, stylizowane z CSS. Spróbuj wykonać kilka elementów listy.

wynik

noty

Mimo, że korekta w Firefoksie 3.5 nie pozwala na tworzenie treści do zachowywania się jako pojedynczy poprzednim punkcie (zgodnie ze specyfikacją CSS, „pseudo: przed i. Po interakcji z innymi elementami ... tak jakby były one prawdziwe elementy dodane do odpowiednich elementów”), Oni mogą one być wykorzystywane do niewielkiej poprawy bez tabelach znaczników (np centrowania). Zakładając, że zawartość do centrowania już owinięty w pewnych kolumnach elementu przed i po zawartości mogą być dodawane bez dodawania innych elementów (na przykład w tym przypadku prawdopodobnie jest bardziej właściwy do zawijania tekstu w elemencie  , tak jak w poniższym przykładzie, zamiast dodać dwa puste elementu

 przed i po tekście). (I zawsze ustawić szerokość elementu pływającego, w przeciwnym razie nie będzie unosić się!)

Czytaj więcej:   SZUKASZ systemie Mac IPHONE

HTML

„pływający przed” będzie jednak dodawany do lewego tekstu i nie pozwalają na przekroczenie tego ciągu owinąć wokół jego dnie. Podobnie, „pływający przed” zostanie dodany do prawej stronie tekstu i nie pozwalają na przekroczenie tego ciągu owinąć wokół jego dnie.

CSS

#floatme {pływak: lewy; szerokość: 50%; }
/ * Aby uzyskać pustą kolumnę wystarczy podać kod szesnastkowy non-breaking space \ a0 jako zawartość (użycie \ 0000a0, jeżeli następuje po nim spację innych znaków) * /
.example :: before {content: "Плавающий перед"; float: left; szerokość: 25%
}
.example :: after {content: "Плавающий после"; pływaka: prawo; szerokość: 25%
}
/ * Do stylizacji * /
.example :: wcześniej .example :: później .first {background: żółty; kolor czerwony;
}

wynik

opis

opisstatuskomentarz
CSS Pseudo-Elements Level 4
Definicja ':: before' w niniejszej specyfikacji.
projekt pracyBrak istotnych zmian w stosunku do poprzedniej wersji specyfikacji.
CSS Transitionsprojekt pracyPozwala to na przemian właściwościach określonych w pseudo.
animacje CSSprojekt pracyUmożliwia animację właściwościach określonych w pseudo.
Selektory Level 3
Definicja „:: before” w niniejszej specyfikacji.
rekomendacjaWprowadzenie składnia z dwoma dwukropkami.
CSS Level 2 (wersja 1)
Definicja ':: before' w niniejszej specyfikacji.
rekomendacjaPierwotna definicja przy użyciu składni z okrężnicy.

Wsparcie przeglądarka

Aktualizacja danych z kompatybilnością na GitHub

komputeryprzenośny
ChromKrawędźFirefoxInternet ExplorerOperaSafariAndroid WebViewChrome dla AndroidaKomórka krawędźFirefox dla AndroidaOpera dla AndroidaiOS SafariSamsung Internet
Podstawowe wsparcieChrome
Pełne wsparcie

Tak

Pełne wsparcie

Tak

Pełne wsparcie

Tak

: Przed «> Alternative Name
: Przed «> Alternative Name Wykorzystuje niestandardową nazwę: :before
Krawędź
Pełne wsparcie

Tak

Pełne wsparcie

Tak

Pełne wsparcie

Tak

: Przed «> Alternative Name
: Przed «> Alternative Name Wykorzystuje niestandardową nazwę: :before
Firefox
Pełne wsparcie

1.5

uwagi
Pełna obsługa

1.5

uwagi
uwagiPrzed Firefox 57, Firefox miał błąd, ::beforepseudo-elementy zostały jeszcze wygenerowane, nawet jeśli contentwartość nieruchomości były ustawione na normallub none.
uwagiPrzed Firefox 3.5, tylko zachowanie CSS poziom 2 :beforebył wspierany, co zabronione position, float, list-style-*a niektóre displaywłaściwości.
Pełne wsparcie

1

: Przed «> Alternative Name
: Przed «> Alternative Name Wykorzystuje niestandardową nazwę: :before
IE
Pełne wsparcie

9

Pełne wsparcie

9

Pełna obsługa

8

: Przed «> Alternative Name
: Przed «> Alternative Name Wykorzystuje niestandardową nazwę: :before
Opera
Pełne wsparcie

7

Pełne wsparcie

7

Pełne wsparcie dla

4

: Przed «> Alternative Name
: Przed «> Alternative Name Wykorzystuje niestandardową nazwę: :before
Safari
Pełna obsługa

4

Pełne wsparcie dla

4

Pełne wsparcie dla

4

: Przed «> Alternative Name
: Przed «> Alternative Name Wykorzystuje niestandardową nazwę: :before
WebView Android
Pełne wsparcie

Tak

Pełne wsparcie

Tak

Pełne wsparcie

Tak

: Przed «> Alternative Name
: Przed «> Alternative Name Wykorzystuje niestandardową nazwę: :before
Chrome Android
Pełne wsparcie

Tak

Pełne wsparcie

Tak

Pełne wsparcie

Tak

: Przed «> Alternative Name
: Przed «> Alternative Name Wykorzystuje niestandardową nazwę: :before
Mobilny brzeg
Pełne wsparcie

Tak

Pełne wsparcie

Tak

Pełne wsparcie

Tak

: Przed «> Alternative Name
: Przed «> Alternative Name Wykorzystuje niestandardową nazwę: :before
Firefox Android
Pełne wsparcie

Tak

Pełne wsparcie

Tak

Pełne wsparcie

Tak

: Przed «> Alternative Name
: Przed «> Alternative Name Wykorzystuje niestandardową nazwę: :before
Opera Android
?
Safari iOS
Pełne wsparcie

5.1
Samsung Internet Android
Pełne wsparcie

Tak
Animacji i wspornik przejściowyChrom
Pełna obsługa

26
Krawędź
Pełne wsparcie

Tak
Firefox
Pełna obsługa

4
IE
nie obsługuje

Nie
Opera
nie obsługują

Nie
Safari
nie obsługują

Nie
WebView Android
Pełne wsparcie

Tak
Chrome Android
Pełne wsparcie

Tak
Mobilny brzeg
Pełne wsparcie

Tak
Firefox Android
Pełna obsługa

4
Opera Android
Brak wsparcia

Nie
Safari iOS
Brak wsparcia

Nie
Samsung Internet Android
Pełne wsparcie

Tak
Czytaj więcej:   Metody optymalizacji witryny

legenda

pełne wsparcie
 

pełne wsparcie

Brak wsparcia
 

Brak wsparcia

kompatybilność nieznany
 

kompatybilność nieznany
Zobacz notatki realizacji.
Zobacz notatki realizacji.
Wykorzystuje niestandardową nazwę.
Wykorzystuje niestandardową nazwę.

Zobaczyć. Również

  • ::after
  • content

etykiety papierowe i uczestnicy


tagi: 

  • CSS
  • Układ
  • Odniesienie
  • Sieć
  • rzekomy

Przyczynił się do tej strony:

dima74,

e-omo


Ostatnia aktualizacja:
dima74,

CSS PRZED IMAGE

Nieruchomość zawartość w CSS jest używany w połączeniu z elementami pseudo :: before i :: after. Jest on używany do dosłownie wstawić zawartość. Istnieją cztery typy wartości może mieć.

Strunowy

.name::before { content: "Name: ";
}

Następnie element tak:

Chris

Uczyniłoby tak:

Name: Chris

Może to być również pusty ciąg znaków, który jest powszechnie postrzegane w rzeczy jak clearfix.

Licznik

div::before { content: counter(my-counter);
}

Więcej informacji na ten temat.

Obraz

div::before { content: url(image.jpg);
}

To jest dosłownie obraz na stronie jak będzie. Może to być również gradient. Należy pamiętać, że nie można zmieniać wymiary obrazu, gdy włożona w ten sposób. Można również wstawić obrazek używając pusty ciąg za treści, co czyni go display: blockw jakiś sposób zaklejania go i używając background-image. W ten sposób można re-size go background-size.

Atrybut

Można użyć wartości (ciągi, tak), które są podejmowane bezpośrednio z atrybutów w formacie HTML.

60
[data-visual-label]:before { content: attr(data-visual-label) ": ";
}

Więcej informacji

Zawartość włożona była to tak naprawdę nie jest w DOM , więc ma pewne ograniczenia. Na przykład nie można dołączyć wydarzenie bezpośrednio (tylko) do elementów pseudo. Jest również inconsistant czy fragment tekstu wstawiony w ten sposób jest odczytywany przez czytniki ekranu lub czy można go wybrać.

  • Elementy fajnych rzeczy można zrobić pseuedo
  • Przedstawienie o elementach pseudo
  • MDN Docs

Wsparcie przeglądarka

ChromSafariFirefoxOperaTO ZNACZYAndroidiOS
KażdyKażdyKażdy4+8+KażdyKażdy

Dla Opery, url () obsługiwane tylko w wersji 7+.

Wybierz swój język

polskiangielski niemiecki hiszpański francuski włoski portugalski turecki arabski ukraiński szwedzki węgierski bułgarski estoński Chiński (uproszczony) wietnamski rumuński tajski słoweński słowacki serbski malajski norweski łotewski litewski koreański japoński indonezyjski hinduski hebrajski fiński grecki holenderski Czech duński chorwacki Chiński (tradycyjny) Filipińska urdu Azeybardzhansky ormiański Białoruski bengalski gruziński kazachski Kataloński mongolski rosyjski Tadzhitsky Tamil'skij telugu Uzbetsky