css :before and :after

Preview:

<style>
body {
    padding:20px;
}
h3:before {
    content: ":before ";
}
h3:after {
    content: " :after";
}
div {
    width: 200px;
    height: 150px;
    position: relative;
    background: yellow;
}
div:before {
    content: ":before";
    position: absolute;
    right: -10px;
    top: 20px;
    height: 30px;
    width: 60px;
    background: lightblue;
}
div:after {
    content: ":after";
    position: absolute;
    left: 20px;
    bottom: 10px;
    height: 30px;
    width: 60px;
    background: lightgreen;
}
​</style>
<h3>simple header</h3>
<div>simple div</div>

css :before and :after support - supported by all modern browsers and ie8+.

Leave a Reply

Your email address will not be published. Required fields are marked *