Using Data-Attributes (data-*) in CSS

We can store extra information about elements using data-* attribute. The following examples illustrate CSS data-* attribute.

Example

Tea

Hot Spicy Tea or Ice Lemon Tea

Toast

Hot Garlic Butter Toast

(hover over food item)

Output

This will produce the following result ?

Example

Demo Text

Output

This will produce the following result ?