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>