::after (:after) | Loop and Break

The CSS :after pseudo-element matches a virtual last child of the selected element. Typically used to add cosmetic content to an element, by using the content CSS property. This element is inline by default.

Syntax

element:after { style properties } /* CSS2 syntax */
element::after { style properties } /* CSS3 syntax */

The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.

<!DOCTYPE html>
<html>
    <head>
        <title>CSS tooltips</title>
        <style type="text/css">
            span[data-descr] {
                position: relative;
                text-decoration: underline;
                color: #00F;
                cursor: help;
            }
            
            span[data-descr]:hover::
            
            after {
                content: attr( data-descr);
                position: absolute;
                left: 0;
                top: 24px;
                min-width: 200px;
                border: 1px #aaaaaa solid;
                border-radius: 10px;
                background-color: #ffffcc;
                padding: 12px;
                color: #000000;
                font-size: 14px;
            }
        </style>
    </head>
    <body>
        <p>
            This is an example 
			<span data-descr="collection of words and punctuation">text</span>
            with a few 
            <span data-descr="small popups which also hide again">
             tooltips</span>. 
		Take a <span data-descr="not to be taken literally">
             look</span>...
        </p>
    </body>
</html>

Categories

Syntax