CSS Pseudo Element ::first-letter dan ::first-line

Halo teman teman dumenity, selamat datang di tutorial tutorial pemrogramman web dumet school, kali ini kita akan mengenal apa itu CSS Pseudo Element :first-letter dan :first-line.

Pseudo Element adalah element semu yang berada pada tiap tiap tag HTML, seakan akan kita menambahkan elemen atau suatu tag baru di dalam tag yang kita beri style. semua tag HTML bisa kita beri pseudo element. sebelum nya kita pernah bahas yah mengenai CSS Pseudo Element :before dan :after. Berbeda dengan :before dan :after yang fungsinya untuk menyisipkan content. ::first-letter dan ::first-line seolah-olah memberikan tag extra pada huruf pertama (first-letter) atau pada baris pertama (first-line).

Berikut ini contoh penggunaan first-letter pada sebuah paragraf :

<!DOCTYPE html>
<html lang ="en" dir ="ltr">
  <head>
    <meta charset ="utf-8">
    <title> CSS Pseudo Element </title>
  </head>
  <body>
    <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea blanditiis velit illum architecto assumenda perferendis ipsum accusamus repellat recusandae, dolores soluta eveniet praesentium quae at nemo enim harum veniam, doloribus! </p>
  </body>
</html>

dan css nya seperti berikut

p:first-letter{
	font-size : 50px;
	font-family: "Monotype Corsiva";
	float : left;
	margin-right : 30px;

}

maka hasilnya akan seperti berikut.

jadi kalo ::first-letter itu mengubah hurud pertamanya. coba sekarang kita akan membuat nya jadi ::first-line.

p:first-line{
	font-size : 50px;
	font-family: "Monotype Corsiva";
	float : left;
	margin-right : 30px;

}

maka satu baris paragraf tersebut akan berubah.

sekian tutorial CSS Pseudo Element ::first-letter dan ::first-line, semoga bermanfaat teman teman.

CSS Pseudo Element ::first-letter dan ::first-line

Kategori