DEV Community

Salah Hasanin
Salah Hasanin

Posted on

Answer: CSS technique for a horizontal line with words in the middle

answer re: CSS technique for a horizontal line with words in the middle

Jun 20 '17
63

Here is Flex based solution.

A heading with a central horizontal line to its sides

h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid #000;
  margin: auto;
}
h1:before {
  margin-right: 10px
}
h1:after {
  margin-left: 10px
}
<h1>Today</h1>

JSFiddle: https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

Top comments (0)

Read next

imac profile image

Image Effects With HTML Canvas

Ian M -

sergerad profile image

Panic and Recover in the Go Runtime

Serge Radinovich -

hsaenzg profile image

Sumérgete en la Nube: Como comenzar tu Cloud Journey

Hazel Saenz -

louaiboumediene profile image

04 - Building a Learning Management System (LMS): Embrace Hands-on Learning Approach

Louai Boumediene -