Simple Blockquote Dengan Animasi CSS

Cara membuat blockquote yang simple serta menarik untuk mempercantik tulisan artikel yang menandai bahwa itu penting. Blockquote ini tidak menggunakan gambar hanya dengan css saja dan sedikit element pseudo :before / :after sebagai media animasinya.

---

VIEW DEMO

<blockquote>

ISI TULISAN APA SAJA DI SINI

</blockquote>

blockquote{
  background-color:#fff;
  color:#444;
  font-size:1.2em;
  font-family:Georgia, Serif;
  text-align:center;
  line-height:1.6;
  position: relative;
  width: 75%;
  margin: 30px auto;
  border-top:4px dotted grey;
  border-bottom:4px dotted grey;
  padding:20px;
  padding-top:30px;
}
blockquote:before{
  font: bold 1.9em Georgia, serif;
  /* ganti jika menggunakan icon font */
  content: "\0201C";
  color: grey;
  /* Lingkaran*/
  width: 30px;
  height: 30px;
  line-height: 45px;
  border-radius: 30px;
  margin-top: -20px;
  margin-left: -20px;
  background: #fff;
  border:2px solid grey;
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  text-align: center;
  transition:all .4s;
}
blockquote:hover:before{
  background: grey;
  color:#fff;
}

---