CSS Pseudo-elemen

CSS pseudo-elemen yang digunakan untuk menambahkan efek khusus pada beberapa penyeleksi / selektor. 


sintak
Sintak dari pseudo-elemen:
selector:pseudo-element {property:value;}
Bisa juga ditulis

selector.class:pseudo-element {property:value;}


Pseudo-elemen :first-line

":first-line" digunakan untuk menambah gaya khusus untuk baris pertama dari teks. Pada contoh berikut browser format baris pertama dari teks dalam elemen sesuai dengan gaya di "first-line" pseudo-elemen (di mana browser memberikan garis break, yang tergantung pada ukuran jendela browser):

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

Catatan: pseudo-elemen :first-line hanya dapat digunakan dengan elemen block-level. Sifat-sifat yang berikut berlaku pada pseudo-elemen :first-line:
  • font properties
  • color properties 
  • background properties
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Pseudo-elemen :first-letter 

":first-letter" digunakan untuk menambah gaya khusus pada huruf pertama dari teks:

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}

Catatan: pseudo-elemen "first-letter" hanya dapat digunakan dengan elemen block-level. Sifat-sifat berikut yang berlaku untuk pseudo-element "first-letter": 
  • font properties
  • color properties 
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align (only if "float" is "none")
  • text-transform
  • line-height
  • float
  • clear


Pseudo-elemen dan CSS Class

Pseudo-elemen dapat dikombinasikan dengan kelas CSS:

p.article:first-letter {color:#ff0000;}
<p class="article">Ini adalah sebuah artikel</p>

Contoh di atas akan menampilkan huruf pertama dari semua paragraf dengan class = "article", dalam warna merah. 


Multiple-elemen Pseudo 

Beberapa pseudo-elemen juga dapat dikombinasikan. Pada contoh berikut, huruf pertama dari sebuah paragraf akan merah, dalam ukuran font. Sisa dari baris pertama akan berwarna biru, dan small-caps. Sisa paragraf akan menjadi ukuran font default dan warna:

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}


CSS - Pseudo-elemen :before

Dapat digunakan untuk memasukkan beberapa konten sebelum isi elemen. Contoh berikut menyisipkan gambar sebelum setiap elemen <h1>:

h1:before
{
content:url(smiley.gif);
}


CSS - Pseudo-Elemen :After

Dapat digunakan untuk memasukkan beberapa konten setelah isi elemen. Contoh berikut menyisipkan gambar setelah setiap elemen <h1>:

h1:after
{
content:url(smiley.gif);
}


Pseudo-elemen

Kolom "CSS" menunjukkan di mana versi CSS properti didefinisikan (CSS1 atau CSS2).
Pseudo nameDescriptionCSS
:afterMenambahkan kontent setelah elemen2
:beforeMenambahkan kontent sebelum elemen
2
:first-letterMenambah style pada karakter pertama dari teks1
:first-lineMenambah style pada baris pertama dari teks1
 
Bagikan halaman ke sosial media
 
 
 

   Komentar Anda