Pseudoelementy

seudoelement first-line

    P:first-line { styleinfo }  /* pierwszy wiersz tekstu dla każdego wystąpienia tego elementu */

Pseudoelement ‘first-line’ może być używany jedynie w elementach blokowych i mogą mu być nadawane jedynie następujące typy własności : font, color, background properties, word-spacing , letter-spacing , text-decoration , vertical-align, text-transform , line-height, clear.

Pseudoelement first-letter

Pseudoelement ‘first-letter’ może mieć następujące własności: font, color, background, ‘text-decoration’ , ‘vertical-align (jeśli ‘float’ jest ‘none’), ‘text-transform’ , ‘line-height’ , margins, padding, border, ‘float’ , ‘clear’ Aby utworzyć opuszczoną literę (dropcap), obejmującą dwa wiersze:

   P              { font-size: 12pt; line-height: 12pt }
   P:first-letter { font-size: 200%; float: left }

Przeglądarka określa, jakie znaki znajdują się wewnątrz elementu ‘first-letter’. Normalnie, apostrofy i cudzysłowy poprzedzające pierwszą literę powinny być także obejmowane. W przeciwnym razie informacja o stylu zostanie zignorowana, jeśli blok zaczyna się od znaku nie będącego literą lub cyfrą.

Własności ustalone dla ‘first-line’ są dziedziczone przez ‘first-letter’, ale są nadpisywane, jeśli ta sama własność jest zdefiniowana w ‘first-letter’.

Dodawanie content :before i :after

Poniższy kod dodaje (automatycznie generuje) tekst przed i po zawartości określonego elementu.

p:before {content : "Początek akapitu"}
p:after {content : "Koniec akapitu"}

content

Wartość contentstring | address | counter | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote | inherit
Używany z:before i :after
Dziedziczenienie

Własność generuje określoną treść przed (:before) i za (:after) elementem. string to tekst, address to zwykle internetowy adres URL, counter jest opisany poniżej i w innych miejscach tego przewodnika, quotes to odpowiednie symbole apostrofów i cudzysłowów a no-quotes działa tak, jakby cudzysłów lub apostrof został zamknięty. attr( ) nadaje wartość określonemu atrybutowi.

Liczniki są wyświetlane razem z własnością contentpseudoelementów :before i :after.

  • counter(countername, [style]). Opcjonalny atrybut stylu jest domyślnie dziesiętny, ale możemy zdefiniować dowolną wartość w list-style-type.
  • counter(countername, string, style) displays all the counters of the given countername, spereated by the given string.

Leave a Reply