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).
<input type="checkbox" name="a_name" value="value" checked="checked" />
#id { background:url("path_to_image.png"); background-size:contain; background-repeat:no-repeat; }
var rest8_7 = 8 % 7; alert(rest8_7);
$nr = ceil(3.5); echo $nr; // 4