::before and ::after Pseudo Elements CSS3 Demos | Grains of Sand

CSS3 Demos | ::before & ::after

::before and ::after are used to create pseudo-elements before or after a targeted element. For example p::before{content:'*';} will insert an asterisk before every paragraph.

Syntax

element::before{ content:'whatever to go before the element'; } element::after{ content:'whatever to go after the element'; }

Usage

p.example::after{ content:' - boo!!'; color:#ff0000; font-size:140%; }
will insert - boo!! in red with a font size of 140% at the end of each paragraph with the class 'example' like so...

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Note on whether it's : or ::

In older versions of CSS, both pseudo-elements (::before, ::after) and pseudo-classes (a:link, a:hover) used a single colon, but in more recent versions only pseudo-classes use the single colon, with pseudo-elements now using a double colon. While all modern browsers support both single and double colons, it's best practice to start using double colons for pseudo-elements There is a notable exception of course - IE8 and earlier don't support a double colon, so if you need to support those browsers you'll need to use a single colon for your pseudo-elements

Examples and Code

DEMO 1 -- Replace List Item Bullet Points

Replace the standard list bullet points with something of your choosing
In this case two hyphens
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

In this example the bullet point is replaced with an image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

HTML

<ul class="hyphens">
<li>Replace the standard list bullet points with something of your choosing</li>
<li>In this case two hyphens</li>
</ul>

<ul class="image">
<li>In this example the bullet point is replaced with an image</li>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</li>
</ul>

CSS

/**First remove the normal bullet point from the list items**/
ul.hyphens li, ul.image li{
list-style-type:none;
}
/**Now place whatever you require in their place**/
ul.hyphens li::before{
content:'-- ';
}
ul.image li::before {
padding-right: 5px;
content: url(bullet-image.png);
}

DEMO 2 -- Image Caption

Give images a caption using the title attribute (note that ::before and ::after don't work with the title attribute in the image tag)

HTML

<li title="Bassenthwaite, Keswick">
<img src="assets/before01.jpg" width="200" height="133" alt="Bassenthwaite">
</li>

CSS

li::after{ /* if you want the caption to appear above the image use li::before , if you're using the title attribute from a link, then change this to a::after or a::before */
content: attr(title);
display: block; /*places the caption on its own line*/
}

See a more detailed step by step guide to adding image captions using ::after and ::before pseudo elements

DEMO 3 -- Display URL After A Link

This technique can be useful for print and mobile stylesheets.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.

HTML

<p class="url"><a href="http://somelinkhere.com">Lorem ipsum dolor sit</a> amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>

CSS

.url a::after{
content: ' (' attr(href) ')';
}

DEMO 4 -- Sticky Tape

You can add a sticky tape effect using ::before and/or ::after
Note: This does not work in IE8 or lower.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac lectus lectus, id suscipit massa. Sed vitae enim non augue molestie fermentum. Phasellus quis ligula est. Fusce congue, erat eget tristique venenatis, leo nibh porttitor orci, non laoreet nisi ante nec justo .

HTML

<div id="sticky">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac lectus lectus, id suscipit massa. Sed vitae enim non augue molestie fermentum. Phasellus quis ligula est. Fusce congue, erat eget tristique venenatis, leo nibh porttitor orci, non laoreet nisi ante nec justo.</p>
</div>

CSS

/**FIRST CREATE THE BOX**/
#sticky{
position: relative; /*for more info on positioning see the Support section below*/
width: 300px;
background: #832436;
/*give the box a drop shadow*/
-webkit-box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .75);
box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .75);
}

/**NOW WE CREATE THE TAPE**/
/*First the basic styling of both strips*/
#tape::before, #tape::after{
content: ''; /*because there is nothing between the ' ' the content of the pseudo elements will be blank*/
display: block;
position: absolute; /*for more info on positioning see the Support section below*/
background-color: rgba(220,212,176,0.85); /*using rgba for the colour lets us give the tape some opacity*/
height: 25px;
}

/*Now position the left strip of tape*/
#tape::before{
left:-5px; /*distance from the left edge of the box*/
top: -15px; /*distance from the top of the box*/
width: 45px; /*length of the strip of tape*/
/*rotate the tape, in this case 12° anti-clockwise*/
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}

/*Finally position the right strip*/
#tape::after {
left: 298px; /*distance from the left edge of the box*/
top: -10px; /*distance from the top of the box*/
width: 70px; /*length of the strip of tape*/
/*rotate the tape, this time 20° clockwise*/
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
}

See a more detailed step by step guide to creating sticky tape using ::after and ::before pseudo elements

DEMO 5 -- Folded Corner

Folded corners using ::before and ::after pseudo elements. Folds can be on any corner, see the code below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.

HTML

<section id="folded">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
</section>

CSS

/**FIRST WE STYLE THE BOX**/
#folded {
position:relative; /*for more info on positioning see the support section below*/
width:300px;
padding:20px 40px; /*use enough padding to accommodate the fold*/
background:#a5a381;
}

/**NOW CREATE THE FOLD**/
/*Basic Fold Styling*/
.folded::after {
content:''; /*because there is nothing between the ' ' the content of the pseudo element will be blank*/
position:absolute; /*for more info on positioning see the support section below*/
/*Give the fold a small drop shadow*/
-webkit-box-shadow:-1px 1px 3px -4px rgba(0,0,0,0.2);
-moz-box-shadow:-1px 1px 3px -4px rgba(0,0,0,0.2);
box-shadow:-1px 1px 3px -4px rgba(0,0,0,0.2);
}
/**Right Top Fold**/
#folded::after{
top:0;
right:0;
border-top:#efefe1 0 solid; /*background colour of the containing element*/
border-right:#efefe1 65px solid; /*background colour of the containing element, size of the fold required*/
border-bottom:#8c8a6c 65px solid; /*colour and size of the fold*/
border-left:#8c8a6c 0 solid; /*colour of the fold*/
}
/**Left Top Fold**/
#folded::after{
top:0;
left:0;
border-top:#efefe1 0 solid; /*background colour of the containing element*/
border-right:#8c8a6c 0 solid; /*colour of the fold*/
border-bottom:#8c8a6c 65px solid; /*colour and size of the fold*/
border-left:#efefe1 65px solid; /*background colour of the containing element, size of the fold required*/
}
/**Left bottom Fold**/
#folded::after{
bottom:0;
left:0;
border-top:#8c8a6c 65px solid; /*colour and size of the fold*/
border-right:#8c8a6c 0 solid; /*colour of the fold*/
border-bottom:#efefe1 0 solid; /*background colour of the containing element*/
border-left:#efefe1 65px solid; /*background colour of the containing element, size of the fold required*/
}
/**Right bottom Fold**/
#folded::after{
bottom:0;
right:0;
border-bottom:#efefe1 0 solid; /*background colour of the containing element*/
border-right:#efefe1 65px solid; /*background colour of the containing element, size of the fold required*/
border-top:#8c8a6c 65px solid; /*colour and size of the fold*/
border-left:#8c8a6c 0 solid; /*colour of the fold*/
}

See a more detailed step by step guide to creating folded corners using ::after and ::before pseudo elements

Notes & Browser Support

Positioning

Some of the demos use position:absolute together with position:relative, so here's a brief explanation...
position:relative -- lets you position an object relative to its normal position, using top, bottom, left and right
position:absolute -- removes an object from the normal flow and positions it exactly where you say on the page
position:relative with position:absolute -- lets you position a child element inside its parent. If you don't first use position:relative on the parent element, the absolutely positioned child will move outside the parent.

See a further explanation and example of using relative and absolute positioning together.

Other CSS Used

The demos use other CSS3, you can find out more about those by following the links below...
border-radius
box-shadow
transform:rotate

Browser Support

::before and ::after are supported by all the latest browsers, IE8 and earlier require the use of :before and :after (note, single colon) and have a few bugs.

Browser Prefixes

No browser prefixes are required

More CSS3 Demos This Way