Everything about `<hr>`: When to use it and how to style it
Tags: html, css, typography
Published: 2021-05-01 12:38:02

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.![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l57fcgp0qqc2e7yreedh.png)

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][James (2017)]

## 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:

```css
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][Coyier (2021)]

In other words, we need:

```css
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:

```css
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](https://charcod.es/8258) ([Wikipedia (2021)]).![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5lyxjyn44c4ntq09ljej.jpeg)Asterisms in the 1922 edition of *[Ulysses](https://en.wikipedia.org/wiki/Ulysses_(novel))* (source: [Wikimedia Commons](https://en.wikipedia.org/wiki/Asterism_(typography)#/media/File:James_Joyce,_Ulysses,_1ed_2pr,_p240.jpg))

Or we can use a fleuron (or [floral heart](https://charcod.es/#floral%20heart/10086)), dating back to Ancient Greece ([Ferlazzo (2013)]).![img](https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Ph.Kamiros_19.jpg/1920px-Ph.Kamiros_19.jpg)Τypographic ornament in ancient city of [Kamiros](https://en.wikipedia.org/wiki/Kamiros) in Rhodes island, Greece (source: [Wikimedia Commons](https://en.wikipedia.org/wiki/Fleuron_(typography)#/media/File:Ph.Kamiros_19.jpg))

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](https://charcod.es/#tea/127861)).

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>`:

```css
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](https://docs.microsoft.com/en-us/typography/font-list/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 (§)](https://en.wikipedia.org/wiki/Section_sign) together with horizontal rules:

```css
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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4g2tmmfxup5n200g5imu.png)

### 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:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1l8ysq4bgmjhw04xg259.png)

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. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1d3lxr5gv67wsglbyb98.png)
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][Cope (2011)]”, _CSS-Tricks_, Sep. 6, 2011.

[Cope (2011)]: https://css-tricks.com/almanac/selectors/a/after-and-before/

Coyier, Chris. (2011) “[Simple Styles for Horizontal Rules][Coyier (2011)]”, _CSS-Tricks_, Nov. 22, 2011. 

[Coyier (2011)]: https://css-tricks.com/simple-styles-for-horizontal-rules/

Coyier, Chris. (2021) “[Not Your Typical Horizontal Rules][Coyier (2021)]”, _CSS-Tricks_, Apr. 16, 2021. 

[Coyier (2021)]: https://css-tricks.com/not-your-typical-horizontal-rules/

Ferlazzo, Lisa (2013) “[Punctuation Graveyard: the Hedera][Ferlazzo (2013)]”, _The Wordict_, May 10, 2013 (via Internet Archive).

[Ferlazzo (2013)]: https://web.archive.org/web/20131029191558/http://thewordict.com/2013/05/10/punctuation-graveyard-the-hedera/

Friedlander, Joel. (2010) “[Book Design: 8 Solutions to the Text Break Dilemma][Friedlander (2010)]”, _The Book Designer_, Jun. 30, 2010. 

[Friedlander (2010)]: https://www.thebookdesigner.com/2010/06/book-design-8-solutions-to-the-text-break-dilemma/

James, Oliver (2017) “[Empty HTML Elements][James (2017)]”, _Interneting Is Hard_, 2017. 

[James (2017)]: https://www.internetingishard.com/html-and-css/basic-web-pages/#empty-html-elements

Kudamatsu, Masa (2020) “[System Font Stack: its history and rationale][Kudamatsu (2020)]”, _Medium.com_, Mar. 11, 2020. 

[Kudamatsu (2020)]: https://medium.com/towards-more-beautiful-web-typography/survey-system-font-stack-5f73a3b39776?sk=1146fc332b93995a83493f2f887acc72

MDN (2021) “[\<hr\>: The Thematic Break (Horizontal Rule) element][MDN (2021)]”, _MDN Web Docs_, Mar. 27. 2021 (last updated). 

[MDN (2021)]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr

Microsoft (2021) “[Segoe UI Emoji font family][Microsoft (2021)]”, _Microsoft Docs_, Mar. 11, 2020.

[Microsoft (2021)]: https://docs.microsoft.com/en-us/typography/font-list/segoe-ui-emoji

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

[Otto (2018)]: https://markdotto.com/2018/02/07/github-system-fonts/

Ry- (2015) “[An answer to ‘Replacing \<hr\> line with with a custom glyph’][Ry- (2015)]”, _Stack Overflow_, Aug. 21, 2015. 

[Ry- (2015)]: https://stackoverflow.com/a/32146824/11847654

Soueidan, Sara (2021) “[Not Your Typical Horizontal Rules][Soueidan (2021)]”, _Sarasoueidan.com_, Mar. 25, 2021. 

[Soueidan (2021)]: https://www.sarasoueidan.com/blog/horizontal-rules/

W3Schools (2021a) “[HTML \<hr\> Tag][W3Schools (2021a)]”, _W3Schools HTML Element Reference_, 2021. 

[W3Schools (2021a)]: https://www.w3schools.com/tags/tag_hr.asp

W3Schools (2021b) “[How TO — Style HR (Horizontal Ruler/Line)][W3Schools (2021b)]”, _W3Schools How To_, 2021. 

[W3Schools (2021b)]: https://www.w3schools.com/howto/howto_css_style_hr.asp

WHATWG (2021) “[4.4.2 The hr element][WHATWG (2021)]”, _HTML Living Standard_, Apr. 30, 2021 (last updated). 

[WHATWG (2021)]: https://html.spec.whatwg.org/#the-hr-element

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

[Wikipedia (2021)]: https://en.wikipedia.org/wiki/Asterism_(typography)