The CSS pseudo-elements are used to style certain aspects or parts of an element without introducing new markup or tags in the HTML document.
For example, when you define a CSS style for an HTML tag or a particular class, the content of all those tags or class will have the same style. If you want to add a different CSS style to the first letter or to the first line of a paragraph (or other block-item), you can use pseudo-elements.
after
pseudo-element can be used to insert some content after the content of an element.To add a specific content (text, image, .wav sound) with CSS, it is used the content
property and a value that represent the content; text content is added between quotes; images or .wav sound are added using url(url_file)
value.
Notice how it's displayed the word 'CoursesWeb' immediately after the last character of each <h4> element, as if part of the original text, but can have its own style.
<style> h4:after { content: 'CoursesWeb'; color: blue; } </style> <h3>Example CSS after</h3> <h4>Content of the first H4 tag ... </h4> <h4>Text within anothet H4 element</h4>
before
it is similar to after, the content is inserted in the same way, but at the beginning of the element.<style> h4:first-child:before { content: 'CoursesWeb-'; color: blue; } </style> <h3>Example CSS before</h3> <div> <h4>Content of the first H4 tag ... </h4> <h4>Text within anothet H4 element</h4> </div>
first-letter
adds a special style to the first letter of a text.The first-letter
pseudo-element can only be used with block elements.
<style> .test:first-letter { font-size: 25px; color: red; } </style> <h4>Example CSS first-letter</h4> <p class='test'>Text within a paragraph with class='test' ...</p> <div class='test'>Another text content, in a DIV, with the same class attribute.</div>
first-line
adds a special style to the first line of a text.The first-line
pseudo-element can only be used with block elements.
<style> .test:first-line { font-weight: bold; color: blue; } </style> <h4>Example CSS first-line</h4> <p class='test'>Paragraph with multiple lines<br /> The second line ...<br/> Another line in the same paragraph.</p> <div class='test'>Text content with two lines in a DIV element<br> The second line inside this DIV.</div>
CSS2 defined the first-letter, first-line, before, and after pseudo-elements with a single colon (:). To better distinguish pseudo-elements from pseudo-classes, the CSS3 has changed this to two colons (::), (selector::pseudo-element).
<ul> <li>http://coursesweb.net/html/</li> <li>http://coursesweb.net/css/</li> </ul>
.some_class { display: list-item; }
var obj = { "courses": ["php", "javascript", "ajax"] }; var jsonstr = JSON.stringify(obj); alert(jsonstr); // {"courses":["php","javascript","ajax"]}
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>'; $dochtml = new DOMDocument(); $dochtml->loadHTML($strhtml); $elm = $dochtml->getElementById("dv1"); echo $elm->nodeValue; // CoursesWeb.net