content

The content property allows to specify what content will be automatically generated.

The possible values are

<string>to insert any text
<url>to insert an internet resource e.g: url(fellas.jpg)
<counter>;to insert a counter for a list
attr(A)to insert the value of the A attribute
open-quote | close-quote | no-open-quote | no-close-quote


Notes:
Notes
- The default value of the 'content' property is empty
- To insert a forced new line, "\A" escape sequence is used.(similar to <br> element)


snippet
<html>
<head>
<style>
:before{content: "<>"; color: red}
:after{content: "</>"; color: red}
table, form {display: block}
</style>
</head>
<body>
<h2>This is a Header 2</h2>
<p>This is a paragraph. <i>Italic text</i>
<blockquote>This is a blockquote</blockquote>
<ul style="list-style-type: disc">
<li>item 1</li>
<li>item 2</li>
</ul>
<form>
<input type="text">
<input type="button" value="Submit">
</form>

<table>
<tr><td>data 1</td><td>data 2</td></tr>
<tr><td>data 3</td><td>data 4</td></tr>
</table>
</body>
</html>
snippet

<head>
<style>
h2:before{content: "<h2>"; color: red}
h2:after{content: "</h2>"; color: red}

p:before{content: "<p>"; color: blue}
p:after{content: "</p>"; color: blue}

blockquote:before{content: "<blockquote>"; color: magenta}
blockquote:after{content: "</blockquote>"; color: magenta}

ul:before{content: "<ul>"; color: yellow}
ul:after{content: "</ul>"; color: yellow}

form:before{content: "<form>"; color: cyan}
form:after{content: "</form>"; color: cyan}

input:before{content: "<input type="attr(type)">"; color: lime}
input:after{content: "</input>"; color: lime}

span:before{content: url('bullet-1.png');}
span:after{content: url('bullet-2.png');}
</style>
</head>
<body>
<h2>This is a Header 2</h2>
<p>This is a paragraph. <i>Italic text</i>
<blockquote>This is a blockquote</blockquote>
<ul style="list-style-type: disc">
<li>item 1</li>
<li>item 2</li>
</ul>
<form>
<input type="text">
<input type="button" value="Submit">
</form>
</body>
</html>
Related Tutorial
3. content