content

by Richard Hunter

HTML

<h1>Content</h1>
<h2>string appended to before and after</h2>
<div class="appended-string">basic content</div>
<h2>Adding quotes using content</h2>
<div class="quote">It's the end of the <span>world</span> as we know it.</div>
<h2>accessing elements attribute</h2>
<div data-foo="this is the foo attribute"></div>
<h2>An image attached to before element</h2>
<div class="image">an image of Caravaggio</div>

SCSS

.appended-string {

    &:before {
        
        content : "added to front";
        color : red;
    }
        
    &:after {
        content : "added to back";
        color : green;
    }

}


.quote {
    &:before {
        content : open-quote;
    }
    &:after {
        content : close-quote;
    }
    span {
            
        &:before { 
            content : open-quote; 
        }
        &:after { 
            content : close-quote;
        }
    }
}

[data-foo]:before {
    
    content : attr(data-foo);
}

.image:before{
    content : url(http://www.nationalgallery.org.uk/upload/img/Caravaggio-michelangelo-merisia-da-c-face-half.jpg)
}