Everything about `<hr>`: When to use it and how to style it

While we are writing, occasionally we feel the need to indicate a change in topic without using a new section heading. The degree to which the subject matter changes is more significant than a new paragraph would indicate, but less significant than a new section would imply.

A common practice in this situation is to use a horizontal rule:

---

or a row of three asterisks.

How should web developers implement this typographic feature?

Yes, start with <hr> in HTML.

But the information on its implementation detail is scattered around the web. This article aims to put everything important about <hr>, the HTML element to indicate a “thematic break” (WHATWG (2021)).

1. When to use <hr>

James (2017) provides an excellent guide on when to use <hr> (called “horizontal rule” here):

“The transition from one scene of a story into the next or between the end of a letter and a postscript are good examples of when a horizontal rule may be appropriate. ... it carries less significance than the separation created by a new heading element, but more significance than a new paragraph.”

—Oliver James

2. HTML markup

Since we're used to a horizontal rule to indicate a change in topic, it is tempting to use a <div> that is styled as a horizontal line.

Don't. Otherwise screen reader users cannot tell whether the topic has changed or not.

Use <hr> and style it as you please (see Section 3 below).

The flip side of the coin is: don't use <hr> to draw a horizontal line for decorative purposes. Use an SVG image or a <div> element styled as such.

One drawback of the <hr> is that it cannot have child elements. If this is not desirable for styling purposes, Soueidan (2021) proposes the use of <div role="separator"> to ensure accessibility (see Section 3.6 for an application).

3. CSS styling

3.1 Resetting the default style

Browsers render <hr> as a horizontal rule by default. W3Schools (2021a) offers the CSS code that most browsers use as their default style:

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

Coyier (2021) discusses this default style in detail and how to remove it:

“The easier way to clear it is to turn off all the borders then only use border-top or border-bottom. Or, turn off all the borders, set a height, and use a background.”

–Chris Coyier

In other words, we need:

hr {
  border: none;
}

to reset the default style of <hr>.

3.2 Horizontal rule

See Coyier (2011) and W3Schools (2021b) for some examples.

3.3 Three asterisks

The trick to style <hr> as a center-aligned row of three asterisks is the pseudo element's content property. Ry- (2015) offers an example code:

hr {
  border: none;
}
hr::before {
  content: '***';
  display: block;
  text-align: center;
}

See Cope (2011) for pseudo elements in detail.

The above code will render the hr element as height-less and the *** will be overlapped with the following paragraph.

For adjusting vertical spacing, use padding-top and padding-bottom for the <hr> element, not for the pseudo element. The height CSS property creates a distance to the paragraph above, but it keeps the next paragraph overlapped. So does the padding-top property when used alone. We need padding-bottom to push down the paragraph below. I haven't seen anyone point this out. This paragraph is based on my own discovery.

3.4 Other symbols

We can of course replace the pseudo element's content property value with other characters as we please. See Friedlander (2010) for some inspirations taken from book design.

One option is to go back in time. Historically, the row of three asterisks was actually a fake version of what is called Asterism (Wikipedia (2021)).Asterisms in the 1922 edition of Ulysses (source: Wikimedia Commons)

Or we can use a fleuron (or floral heart), dating back to Ancient Greece (Ferlazzo (2013)).Τypographic ornament in ancient city of Kamiros in Rhodes island, Greece (source: Wikimedia Commons)

An alternative for more modern feels is to use emoji or some fun-looking characters in the font of your choice. Pick characters in line with the theme of the document. For a casual article on tea ceremony, for example, I would use: 🍵 🍵 🍵 (teacup without handle).

Of course, for these symbols to be properly rendered in the user's browser, you need to check if the font used on your website or the system fonts on the user's device supports these characters.

To ensure emoji will be rendered properly with the user's system font file, you may want to consider adding the following CSS declaration to <hr>:

font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

which is part of the system font stack employed by GitHub (Otto (2018)). Segoe UI Symbol is a fallback for Windows 7 & 8, as Segoe UI Emoji was released with Windows 10 (Microsoft (2021)). For system font stack in general, see Kudamatsu (2020), another article of mine.

3.5 Combination

MDN (2021) offers the following example, using the section sign (§) together with horizontal rules:

hr {
    border: none;
    border-top: 3px double #333;
    color: #333;
    overflow: visible;
    text-align: center;
    height: 5px;
}

hr:after {
    background: #fff;
    content: '§';
    padding: 0 4px;
    position: relative;
    top: -13px;
}

which renders <hr> as follows:

3.6 SVG image

Finally, you can create a fancy SVG image to be used in place of a horizontal rule. One simple way of doing this is to set the SVG image as the background-image property value for the <hr> element. But this prevents the styling of SVG images with CSS. Soueidan (2021) proposes the use of <div role="separator"> with an inline SVG as its child element, which makes feasible something like this:

Wow, this is really nice. It doesn't totally deviate from the common pattern of using a horizontal rule or a row of center-aligned symbols. The use of silhouette echoes the black ink used in print. But it is certainly new and eye-catching.

4. Final thought

Unless we want to create a feel of printed books or magazines for your website, I believe that web designers/developers should aim for something that only websites can achieve. From this perspective, the SVG image option is worth exploring more. With inline SVGs, you can even animate part of the image.

Another possibility is the use of color, which is expensive in print but super cheap on the web. In my current project, I use simple three asterisks as <hr> but in the color that matches with the one for section titles.
This way, the asterisks' meaning of thematic change will be reinforced due to its visual connection to section titles.

---

Let me know if this article misses anything relevant to the use of <hr>.

References

Cope, Sara (2011) “::before / ::after”, CSS-Tricks, Sep. 6, 2011.

Coyier, Chris. (2011) “Simple Styles for Horizontal Rules”, CSS-Tricks, Nov. 22, 2011.

Coyier, Chris. (2021) “Not Your Typical Horizontal Rules”, CSS-Tricks, Apr. 16, 2021.

Ferlazzo, Lisa (2013) “Punctuation Graveyard: the Hedera”, The Wordict, May 10, 2013 (via Internet Archive).

Friedlander, Joel. (2010) “Book Design: 8 Solutions to the Text Break Dilemma”, The Book Designer, Jun. 30, 2010.

James, Oliver (2017) “Empty HTML Elements”, Interneting Is Hard, 2017.

Kudamatsu, Masa (2020) “System Font Stack: its history and rationale”, Medium.com, Mar. 11, 2020.

MDN (2021) “<hr>: The Thematic Break (Horizontal Rule) element”, MDN Web Docs, Mar. 27. 2021 (last updated).

Microsoft (2021) “Segoe UI Emoji font family”, Microsoft Docs, Mar. 11, 2020.

Otto, Mark (2018) “Shipping system fonts to GitHub.com”, markdotto.com, Feb. 7, 2018.

Ry- (2015) “An answer to ‘Replacing <hr> line with with a custom glyph’”, Stack Overflow, Aug. 21, 2015.

Soueidan, Sara (2021) “Not Your Typical Horizontal Rules”, Sarasoueidan.com, Mar. 25, 2021.

W3Schools (2021a) “HTML <hr> Tag”, W3Schools HTML Element Reference, 2021.

W3Schools (2021b) “How TO — Style HR (Horizontal Ruler/Line)”, W3Schools How To, 2021.

WHATWG (2021) “4.4.2 The hr element”, HTML Living Standard, Apr. 30, 2021 (last updated).

Wikipedia (2021) “Asterism (typography)”, Wikipedia, Mar. 12, 2021 (last updated).

Comments

[Sy]

For #3.5, I recommend changes to this for verticle align in any font-size:

hr {
  border: none;
  border-top: 1px solid #333;
  height: 1px;
  border-bottom: 1px solid #333;
  color: #333;
  overflow: visible;
  text-align: center;
}
hr::after {
  background: #fff;
  content: "§";
  padding: 0 0.25em;
  transform: translateY(-50%);
  display: inline-block;
}