SImple Blockquote with CSS Animation

by Dendii Nugraha

HTML

<div class="post-wrapper">
  <p> Fusce dictum ipsum at nulla laoreet, et sagittis nulla tristique. Praesent accumsan nibh sit amet diam egestas pretium. Donec posuere nunc molestie ligula fermentum feugiat. Cras eu tristique erat.</p>
<blockquote>

    Sed consectetur erat eu augue vehicula, vel porta erat tincidunt.
    Sed volutpat felis ultrices pulvinar faucibus.
    Mauris ut velit id nisl bibendum fringilla.
    Proin id dolor nec risus volutpat sagittis.
    Etiam vel nisl sit amet tortor semper ultrices in vel tellus.

</blockquote>
   <p>Nunc hendrerit purus non erat commodo euismod. Etiam posuere nisl dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris quis mattis odio, nec laoreet ligula. Pellentesque id nunc accumsan, pellentesque nulla et, euismod nunc. Donec eu nulla ante. Donec porta feugiat porta. Ut non nibh hendrerit, dignissim urna in, interdum ex. Nam porta ipsum fringilla, hendrerit ex id, sollicitudin leo. Proin viverra porta viverra. Phasellus condimentum augue quam, vel pulvinar nisl congue eget. Aliquam placerat, sapien in fermentum semper, mauris lacus ultricies erat, et efficitur erat sapien at ante. Nunc nec magna eget urna vulputate scelerisque. Praesent vel tortor vestibulum, vulputate tellus sed, ultrices est. Vivamus est risus, convallis quis laoreet quis, accumsan et velit. </p>
   </div>

CSS

.post-wrapper {
  font-family: Georgia, Serif;
  width: 75%;
  margin: 0 auto;
  line-height: 1.6em;
}

p {
  margin: 50px auto;
}


/* 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;
  word-wrap: break-all
}

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;
}