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