CSS Big Quotes

Automatically insert Big Quotes before first and after last paragraph.

by the_voder

HTML

<div id="wrapper">
    <section id="section1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta purus nisl, sit amet suscipit massa consectetur ut. Suspendisse blandit sem quam, eget mattis felis blandit non. Vestibulum facilisis urna a interdum tincidunt. Pellentesque ut enim sed nisi venenatis vestibulum eget quis felis. Nulla lobortis mauris pellentesque aliquam sollicitudin. Curabitur in diam enim. Donec id tellus augue. Nam feugiat metus lacus, et varius ante scelerisque sed. Nunc dignissim ligula auctor, tempor libero ac, viverra arcu. Ut feugiat enim nibh, vel aliquam mi blandit quis. Nulla a porttitor quam. Vivamus quis aliquet lectus. Nullam nisi purus, lobortis eget nunc ac, aliquet vehicula mauris. Donec in nibh vel diam gravida eleifend vitae non nibh. Phasellus aliquet bibendum orci nec facilisis.</p>

        <p>Nunc pulvinar viverra dapibus. Cras luctus ex a dui venenatis, sit amet elementum justo consectetur. Cras venenatis purus quis nibh porta tincidunt. Aliquam ac mi eros. Mauris gravida fermentum maximus. Cras laoreet sem sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget libero interdum leo tempus aliquet ut id sapien. Integer dapibus ornare consectetur.</p>

        <p>Curabitur commodo sodales justo, ut rutrum sem blandit quis. Vestibulum convallis dolor in massa pretium, at tristique sapien suscipit. Etiam ut elementum felis, vel mattis orci. Etiam a facilisis mi, ut ultricies velit. Aliquam mi neque, sodales venenatis aliquam sed, varius nec mauris. Maecenas nunc nisl, pretium a nulla sed, aliquam volutpat augue. Nunc tempus nibh id mauris gravida, id condimentum enim convallis. Vestibulum ac hendrerit nisl. Vivamus at magna consequat, lacinia odio eget, auctor eros. Integer vel posuere velit, at tincidunt nibh.</p>
    </section>
    
    <section>
        
    </section>
</div>

CSS

body,
html,
section {
    margin: 0;
    height: 100%;
    padding: 0;
    width: 100%;
}

#wrapper {
    padding: 0;
    height: 100%;
}

section {

}

section p {
    max-width: 600px;
    text-align: justify;
    margin: 0 auto;
}

section p:first-child::before,
section p:last-child::after {
    font-size: 100px;
    display: block;
}

section p:first-child::before {
    content: "\201C";
}

section p:last-child::after {
    content: "\201D";
}

#section1 {
    background-image: url("http://fc07.deviantart.net/fs37/f/2008/247/3/2/Watercolor_Texture_Stock_1_by_ekoh_stock.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}