Elegant css blockquote

Elegant css blockquote

by Adi Jaya

HTML

<blockquote class="quote">
Lorem ipsum dolor sit amet, ex reque deterruisset ius, an vis rationibus constituto. In causae cotidieque nec. Vim populo explicari tincidunt ea, usu ut velit nostro, no est expetendis liberavisse. Ne his oblique albucius, ex eam aeterno iudicabit imperdiet, in has dicant invenire. Cum te ornatus urbanitas.
</blockquote>

CSS

/* standart browser blokquote */
blockquote {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

/* class quote*/
.quote {
    display: block;
    background: #fff;
    padding: 15px 20px 15px 45px;
    margin: 0 0 20px;
    position: relative;
    font-family: Georgia, serif;
    font-size: 16px;
    line-height: 1.2;
    color: #666;
    text-align: justify;
    border-left: 15px solid #186350;
    border-right: 2px solid #186350;
    -moz-box-shadow: 2px 2px 15px #ccc;
    -webkit-box-shadow: 2px 2px 15px #ccc;
    box-shadow: 2px 2px 15px #ccc;
}

/* before and after*/
blockquote::before{
  content: "\201C";
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #999;
  position: absolute;
  left: 10px;
  top:5px;
}
blockquote::after {
    content: "\201D";
    font-family: Georgia, serif;
    font-size: 60px;
    font-weight: bold;
    color: #999;
    position: absolute;
    bottom: -30px;
    margin-top: -5px;
    margin-left: 5px;
}