How to Use label.css For Labeling HTML Elements?

May 21, 2013

Just a simple yet easy way to label HTML elements, you want! As we label the HTML elements to provide information regarding certain things. Using label.css we can easily label HTML elements. Label.css provides CSS rules to label elements so easily. You can also add hover effects to your labels! Currently, label.css provides two effects fade and float. However, you can add more custom effects if you have a CSS skills. 🙂

How To Use Label.css?

To use label.css in your website, simply follow the steps below:

1) First of all load the label.css in the <head> section of HTML webpage, like:

<LINK href="label.css" rel="stylesheet" type="text/css">

2) Simply, target the elements on which you want to add label and add Class label to that elements. Afterwards, use data-label for label text that will add-on the element.

3) Start Positioning 😉

  <figure class="label inside bottom" data-label="Just an easy and simple way to label everything.">
Compatibility: All Major Browsers
Website: https://usablica.github.io/label.css/
Download: https://github.com/usablica/label.css
Muhammad Dilawar
Muhammad Dilawar
Muhammad Dilawar is a WordPress developer and technical SEO specialist with over 12 years of experience building, optimizing, and maintaining websites. He specializes in WordPress, WooCommerce, server optimization, DNS, Cloudflare, website security, and performance improvements. Through Softstribe, he shares practical guides, tutorials, and industry insights based on real-world experience helping businesses grow their online presence.
More from Muhammad Dilawar