Mengenal Pseudo-Element first-line Pada CSS

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

Sebelumnya kita mesti tahu dahulu apa guna pseudo element first-line di css ? pseudo-element ::first-line yaitu pseudo-elemen yang digunakan bagi memilih format baris pertama-tama pada unsur blok-tingkat (seperti contohnya yaitu  paragraf <p>).

Contoh dari penulisan pseudo-element ::first-line yaitu selaku berikut :

p:first-of-type::first-line {

text-transform: uppercase;

font-weight: bold;

}

baiklah saya akan mendemokannya pada wujud 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 karenanya hasilnya akan seperti ini :

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

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

Baiklah itu saja sari saya mengenai Mengenal Pseudo-Element first-line Di CSS, semoga dapat menambah pengetahuan sahabat dan hingga betemu pad artikel berikutnya.

Sumber https://kursuswebsite.org