PURE CSS BARCODE (UPC-A)

Author:

  • Nick Matantsev
  • January 23, 2017

Made with:

  • HTML (Slim) / CSS (Less)

About the code:

This is just a nice and simple and a plain UPC-A barcode created using HTML and CSS.
How it works: UPC codes use 1-to-4 “pixel” wide bars to encode digits; each digit is a fixed 7 “pixels” wide overall (technically, they are called “modules” and not pixels).
The multiple-box-shadow trick has been used to display the bars: the ::before element of each digit’s li is the anchor/placeholder, and its shadows are the visible bars. The ::before element itself is moved outside of clipping area so as not to obscure any of the box-shadows.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Download Demo and Code