/CSS/CSS technique for a horizontal line with icons in the middle

CSS technique for a horizontal line with icons in the middle

<h1>Heading</h1>
<h1>This is a longer heading</h1>

h1 {
  overflow: hidden;
  text-align: center;
}

h1:before,
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}

Source: stackoverflow.com

Similar codes

0 vote383 views1 answer
Justify xd
CSS
2 votes366 views1 answer
Are you sure you want to delete html
CSS
43 votes368 views4 answers
Scale css
CSS
0 vote376 views2 answers
Facebook box-shadow css
CSS
0 vote328 views2 answers
Mat-select-panel-wrap change position
CSS
1 vote373 views1 answer
Symfony version check
CSS
6 votes345 views1 answer
How to make text wrap on overfloe with css
CSS
45 votes317 views6 answers
How to remove background color in css
CSS
12 votes343 views2 answers
Other children than first css
CSS
42 votes365 views5 answers
Css center everything
CSS