Using :after :before With Position Absolute

Published December 15, 2014 by CSS Newbies.

When CSS3 was released, the ability to place text or images after or before HTML items dynamically with CSS was a major new advantage. For instance:

.div:before {
content: "text";
}

That code will place the word ‘text’ before a div. That level of simplicity is useful if you need to dynamically add text to a header or menu item. However, it is generally better to add the text directly into your HTML or other code.

A more useful way to use :after or :before is using it in conjunction with position: absolute. This can be useful for flair items connected to images, paragraphs or anything else. For example:

.div:after {
content: "*";
position: absolute;
top: 5px;
right: 35px;
font-size: 85px;
color: #fff;
}
.div {
position: relative;
}


That would generate something like this:

The div itself would be relative and the :after would be absolute. The two can be positioned differently from one another. So you can get a nice accent mark on images or other content. Likewise, you can do the same thing with images in CSS as well:

.div:before {
content: url('images/image.png');
padding-right: 5px;
position: absolute;
bottom: 10px;
left: 10px;
}

So again, the ability to place things before or after items is a great feature, but being able to position them is even more important. After all, whats the point of adding something through CSS without being able to position it properly?

  1. Pingback: Setting opacity of background color transparent | Lunarium Design

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>