ANIMATED <HR>

Animated hr (element BAM + modifiers).

See the Pen Animated hr element BAM + Modifiers by @Grienauer (@Grienauer) on CodePen.light

Author

  • @Grienauer

Made with

  • HTML / CSS (SCSS)

FULLWIDTH <HR>

Overflow the parents container and stretch it to 100vw.

See the Pen Fullwidth hr’s by Azragh (@Azragh) on CodePen.light

Author

  • Azragh

Made with

  • HTML / CSS (SCSS)

HR WITH CSS

HR with CSS generated content.

See the Pen CSS: hr with generated content by Gabriele Romanato (@gabrieleromanato) on CodePen.light

Author

  • Gabriele Romanato

Made with

  • HTML / CSS

HTML <HR> TAGS

HTML <hr> with custom CSS.

See the Pen <hr> with custom css by Delonn (@delonnkoh) on CodePen.light

Author

  • Delonn

Made with

  • HTML / CSS

HR WITH CENTERED TEXT

Little dynamic HR tag that still pulls the content from the HTML, but gives it a bit more style. It also fails gracefully to a standard HR tag.

See the Pen HR with centered text by Scott Zirkel (@scottzirkel) on CodePen.light

Author

  • Scott Zirkel

Made with

  • HTML / CSS (SCSS)

SOME HR STYLES

Messing around with some horizontal rule styles.

See the Pen Some HR Styles by Mark Murray (@markmurray) on CodePen.light

Author

  • Mark Murray

Made with

  • HTML / CSS (SCSS)

THE HUMBLE HR

See the Pen The Humble <hr> by Shawn Beatty (@sbeatty) on CodePen.light

Author

  • Shawn Beatty

Made with

  • HTML / CSS

HUMBLE <HR>

A very simple and subtle approach to <hr>s with an .activated state. Added label siblings to show additional information.

See the Pen My submission for "The Humble <hr>" by Jake Albaugh (@jakealbaugh) on CodePen.light

Author

  • Jake Albaugh

Made with

  • HTML / CSS / JavaScript

HTML <HR>

Nice combination of <hr> style and content.

See the Pen <hr> rodeo-010 by Hornebom (@Hornebom) on CodePen.light

Author

  • Hornebom

Made with

  • HTML / CSS

HR EXAMPLE

See the Pen My Summer Vacation by Amanda (@amandadorrell) on CodePen.light

Author

  • Amanda

Made with

  • HTML / CSS

KNIGHT RIDER HR

Single element hr with kitt and karr light bar effect.

See the Pen Knight Rider <hr> by James Delibas (@jdelibas) on CodePen.light

Author

  • James Delibas

Made with

  • HTML / CSS

THE HUMBLE HR

Uses CSS counters. Base-64, CSS3 animations. Pretty cheesy at the moment but this is more to demonstrate what you can do without compromising semantics and using only a single element to do quite a lot.

See the Pen The Humble <hr> by Pali Madra (@palimadra) on CodePen.light

Author

  • Pali Madra

Made with

  • HTML / CSS (SCSS)

SUBTLE HR

See the Pen Subtle hr by Jonathan Freeman (@freethejazz) on CodePen.light

Author

  • Jonathan Freeman

Made with

  • HTML / CSS

A BIT OF ELEGANCE

The <hr> element is used to add some finesse to a responsive and beautifully typeset article.

See the Pen A bit of elegance by Bilal Ayub (@AnalogAyub) on CodePen.light

Author

  • Bilal Ayub

Made with

  • HTML (Haml) / CSS (SCSS) / JS (CoffeeScript)

SIMPLE STYLES FOR HORIZONTAL RULES

18 Simple Styles for horizontal rules (<hr> CSS design).

See the Pen 18 Simple Styles for Horizontal Rules (hr CSS Design) by Ibrahim Jabbari (@ibrahimjabbari) on CodePen.light

Author

  • Ibrahim Jabbari

Made with

  • HTML / CSS

HR DEPARTMENT

List of stylized horizontal rules.

See the Pen HR Department by Joey Hoer (@joeyhoer) on CodePen.light

Author

  • Joey Hoer

Made with

  • HTML / CSS (SCSS) / JavaScript

Categorized in: