{"id":843,"date":"2014-12-15T08:26:05","date_gmt":"2014-12-15T14:26:05","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=843"},"modified":"2014-12-15T08:26:05","modified_gmt":"2014-12-15T14:26:05","slug":"using-after-before-with-position-absolute","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/using-after-before-with-position-absolute\/","title":{"rendered":"Using :after :before With Position Absolute"},"content":{"rendered":"

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:<\/p>\n

\n.div:before {\ncontent: \"text\";\n}\n<\/pre>\n
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. <\/p>\n
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:<\/p>\n
\n.div:after {\ncontent: \"*\";\nposition: absolute;\ntop: 5px;\nright: 35px;\nfont-size: 85px;\ncolor: #fff;\n}\n.div {\nposition: relative;\n}\n<\/pre>\n

\nThat would generate something like this:<\/p>\n
<\/div>\n
\nThe 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:<\/p>\n
\n.div:before {\ncontent: url('images\/image.png');\npadding-right: 5px;\nposition: absolute;\nbottom: 10px;\nleft: 10px;\n}\n<\/pre>\n
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?<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
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:<\/p>\n
.div:before {
\ncontent: “text”;
\n}<\/p>\n
That code will place the word ‘text’ before a div.  That […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[174],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/843"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=843"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/843\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=843"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=843"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=843"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}