Mengenal Pseudo-Element first-line Pada CSS.

Pada tutorial kali ini saya akan membahas kembali tentang css yaitu mengenai pseudo element yang mana sekarang kita akan membahas tentang Mengenal Pseudo-Element first-line Pada CSS.

Sebelumnya kita harus tahu dahulu apa fungsi pseudo element first-line pada css ? pseudo-element ::first-line adalah pseudo-elemen yang digunakan untuk memilih format baris pertama dalam elemen blok-tingkat (seperti contohnya adalah paragraf <p>).

Contoh dari penulisan pseudo-element ::first-line adalah sebagai berikut :

p:first-of-type::first-line {
text-transform: uppercase;
font-weight: bold;
}

baiklah saya akan mendemokannya dalam bentuk sebuah tampilan , silahkan salin code berikut ini :

HTML

<div class="container">
  <article>
    <h2>Lorem Ipsum</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, voluptates, officiis esse adipisci fuga tempore iure vitae facilis quo id neque delectus perferendis maxime iusto in quam aliquid ratione nesciunt.
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, quam, sapiente fuga provident vero libero quae cum beatae suscipit rem similique vel eos cumque modi quo ad veritatis doloremque possimus!
    </p>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis, nisi maiores repellendus delectus laboriosam ratione doloribus vero saepe deleniti reprehenderit minima officiis necessitatibus rem ab sint aperiam tenetur iure labore?
    </p>
  </article>
</div>

CSS

@import url(\'http://fonts.googleapis.com/css?family=Lato:300,400,700,900'\'');
body {
  color: #555;
  font-size: 1em;
  font-family: 'Lato', Arial, sans-serif;
}

.container {
  margin: 50px auto;
  max-width: 700px;
}

p:first-of-type:first-line {
  text-transform: uppercase;
  text-decoration: underline;
  font-weight: bold;
  color: deepPink;
}

p:first-line {
  text-decoration: underline;
  text-transform: uppercase;
  font-weight: bold;
}

setelah kalian salin maka hasilnya akan seperti ini :

Dari gambar di atas sudah menjelaskan bahwa pseudo element first-line itu akan mengincar blok paragraf pada baris pertama saja,

nah mungkin ada yang binggun atau muncul pertanyaan saya menggunakan “::” sebelum first-line , mungkin biasanya hanya satu “:”, sebelumnya saya sudah bahas di artikel yang lalu-lalu bahwa penulisan “::” itu adalah untuk CSS3 , dan untuk CSS1 CSS2 penulisanya hanya satu titik dua saja.

Baiklah itu saja sari saya tentang Mengenal Pseudo-Element first-line Pada CSS, semoga bisa menambah wawasan anda dan sampai betemu pad artikel selanjutnya.

Mengenal Pseudo-Element first-line Pada CSS

Kategori