blockquote styling

by Brodingo

HTML

<blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod incididunt tempor ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod incididunt tempor ut labore et dolore magna aliqua.<span class="credit">Some Guy</span></blockquote>

CSS

body {
    background-color: #666;
    font-family: "Lucida Grande", Lucida Unicode Sans, sans-serif;
}

blockquote {
    position: relative;
    padding: 20px 60px;
    margin: 20px;
    background: #eee9d7;
    color: #666;
    text-shadow: 0 1px 0 #fff;
    font-size: 16px;
    line-height: 32px;
    text-align: justify;
    box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

blockquote:before, blockquote:after {
    content: '\201C';
    position: absolute;
    top: 50%;
    left: 10px;
    height: 0;
    display: block;
    background-color: #bada55;
    color: #cec9b7;
    font-size: 72px;
    line-height: 36px;
}

blockquote:after {
    content: '\201D';
    left: auto;
    right: 10px;
}

blockquote .credit {
    display: block;
    text-align: right;
    font-size: 24px;
    font-style: italic;
}

blockquote .credit:before {
    content: '\30FC';
    padding-right: 5px;
}