Adding Content on Blogs Using CSS

By . Category: CSS Tags: , ,

irnanto.com – There are various ways to add content to a blog automatically. Content to be added can be a lot or a little. This time I will give you a trick how to add content on a blog is easy and automatic. How to add content to a blog that will be discussed this time is to use CSS as atat to display or add content we want.

The content is added, it can be of the text which we fed alone or added automatically from an existing attribute in the blog. CSS content additions in two types, namely after the content or before the content will be added. Add content technique is very powerful when used to add content with the addition of the content of the same content on a particular element or a particular attribute of an HTML tag.

To add content in the blog we will use the pseudo selector element is as follows :after and :before to put the content on after or before the element or content will be added. In addition to pseudo element selector, we’ll also use the CSS property that is content. The content property is used to put the contents of the text content will be added to the blog, or rather the element that has been set.

Usage :after in CSS

Usage :after going to make changes (additions) the content that will be added to the position after elements of CSS selectors. CSS code structure :after almost the same as the structure in general are writing CSS selector:after{property : value; }. For more details, please see source code CSS :after like this.

<!DOCTYPE html>
<html>
    <head>
        <style>
            a:after{content: attr(class);}
            b:after {content: ” :”;}
        </style>
    </head>
    <body>
        <p><a href=”http://irnanto.com” class=”com”>Irnanto.</a> contains free tutorials and references.</p>
        <p><b>Note</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>
    </body>
</html>
add content using css :after

add content using css :after

Usage :before in CSS

Usage :before going to make changes (additions) the content that will be added to the position before the element CSS selectors. CSS code structure :before almost the same as after CSS code structure, only writing after replaced with before like this selector:before{property : value; }. Example source code CSS :before as below.

<!DOCTYPE html>
<html>
    <head>
        <style>
            a:before {content: ” (” attr(href) “)”;}
            b:before {content: “Irnanto “;}
        </style>
    </head>
    <body>
        <p><a href=”http://irnanto.com” class=”com”>Irnanto.</a> contains free tutorials and references.</p>
        <p><b>Note</b> IE8 supports the content property only if a !DOCTYPE is specified.</p>
    </body>
</html>
content results before css

Results of changes to elements using CSS :before

Some may ask, if it can be combined use of CSS after and before?, Yes, of course it could. Examples of the use of CSS after and before simultaneously as below.

<!DOCTYPE html>
<html>
    <head>
        <style>
            a:before {content: ” (” attr(href) “)”;}
            a:after{content: attr(class);}
            b:after {content: ” :”;}
            b:before {content: “Irnanto “;}
        </style>
    </head>
    <body>
        <p><a href=”http://irnanto.com” class=”com”>Irnanto.</a> adalah blog berbagi informasi yang menarik.</p>
        <p><b>Note</b> IE8 hanya bisa menggunakan properti content hanya jika menggunakan !DOCTYPE .</p>
    </body>
</html>
Added Content Using CSS After and CSS Before

Added Content Using CSS After and CSS Before

How ? easy right. Adding Content on Blogs Using CSS can be an alternative to reproduce the contents of a blog article

Ads

No comments yet untuk “Adding Content on Blogs Using CSS”

Tinggalkan Komentar