Pengenalan Pseudo class ::before pada CSS3

Selamat pagi dan salam sejahtera buat kita semuanya ya and may GOD with us :). Oke masih materi seperti yang kemarin yaitu tentang pseudo clasess . Kemarin kita telah membahas tentang pseudo class ::after jika kalian belum tau silahkan kalian baca artikel saya yang kemarin, nah setelah saya membahas tentang pseudo class after sekarang saya akan membahas lawan katanya yaitu Pengenalan Pseudo class ::before pada CSS3.

Pseudo class before pengertianya hampir sama dengan pseudo class after dan penggunaannyapun sama, yang membedakan adalah kalau pseudo class after adalah memberi content setelah element tertentu nah kalau pseudo class before sebaliknya yaitu memberi content sebelum element tertentu. Ok langsung saja kita praktek di bawah ini :

Salin code berikut :

HTML//

<div class="container">
  <blockquote>
   Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
 </blockquote>
</div>

CSS//

body {
  color: #555;
  font-size: 1.3em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

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

.element {
  padding: 20px;
}

blockquote::before {
  content: "\201C";
  color: deepPink;
  font-size: 3em;
  position: relative;
  top: 20px;
}

Saya jelaskan sedikit, pada code di atas menunjukan atau berarti “saya telah memberi sebuah content (“) sebelum element <blockquote>” . Jadi jika kalian jalankan pada browaer masing-masing hasilnya akan tampak seperti ini :

Nah pada gambar terilahat sebuah tanda petik sebelum paragraf kan ? itulah kegunaan pseudo class :: before.

Oke semoga bermanfaat sampai bertemu pada artikel selanjutnya, Terimakasih.

Pengenalan Pseudo class ::before pada CSS3

Kategori