Header decoration with CSS

Example for article on www.tune-it.ru

HTML

<div class="container">
    <h1 class="pretty-header right-line-header">
      HEADER
    </h1>
    Lorem ipsum dolor sit amet, enim impedit ut vim. Mucius adipisci mel te, eam ut putent albucius appareat. Modus detracto ne vix. Maiestatis suscipiantur vix cu, mea et lucilius accommodare. Commodo feugait vis te. Tota noluisse usu te.
  <h1 class="pretty-header right-double-line-header">
      LONG HEADER
  </h1>
 Audiam ornatus democritum mea ei, option fabellas ocurreret at mei. Ei sit libris volumus principes. His reque doming admodum cu, magna senserit volutpat cu sit. Usu ad nostro consequat moderatius, te ius alii labitur.
  <h1 class="pretty-header left-right-line-header">
      HEADER
  </h1>
  Dictas dissentiet cu mei, at eos mollis consulatu adversarium. At duo singulis liberavisse. Eos in unum simul forensibus. His facete causae dissentias eu, forensibus consequuntur in cum, usu an ullum minimum. Inani petentium ex nam.
  <h1 class="pretty-header left-right-line-short-header">
      HEADER
  </h1>
  Facer vulputate dissentiet ut nam. Usu ut everti eleifend, amet minim regione pri et. Natum solet pertinacia ea cum, pro ex alterum adipisci prodesset. An diam mucius vix, vim in quas corpora deserunt. Qui brute ullum habemus ut.
</div>

CSS

html {
  background: #1D1F20;
  font-family: times, serif;
}
.container {
  width: 60%;
  background: #eee;
  padding: 20px 40px;
  margin: 20px auto;
  border-radius: 10px;
}
.pretty-header {
  font-size: 22px;
  line-height: 22px;
  margin: 20px 0px;
  position: relative;
  overflow: hidden;
}

.right-line-header:after {
  content: "";
  border-bottom: 1px solid #4bb;
  width: 100%;
  height: 0.5em;
  position: absolute;
  top: 0px;
  margin-left: 10px;
}
.right-double-line-header:after {
  content: "";
  border-bottom: 1px solid #4bb;
  border-top: 1px solid #4bb;
  width: 100%;
  height: 0.1em;
  position: absolute;
  top: calc(0.45em - 1px);
  margin-left: 10px;
}
.left-right-line-header, .left-right-line-short-header {
  text-align: center;
}
.left-right-line-header:before {
  content: "";
  border-bottom: 1px solid #4bb;
  width: 50%;
  height: 0.5em;
  position: absolute;
  top: 0px;
  margin-left: calc(-50% - 10px);
}
.left-right-line-header:after {
  content: "";
  border-bottom: 1px solid #4bb;
  width: 50%;
  height: 0.5em;
  position: absolute;
  top: 0px;
  margin-left: 10px;
}
.left-right-line-short-header:before {
  content: "";
  border-bottom: 1px solid #4bb;
  border-top: 1px solid #4bb;
  width: 40px;
  height: 0.1em;
  position: absolute;
  top: calc(0.45em - 1px);
  margin-left: -50px;
}
.left-right-line-short-header:after {
  content: "";
  border-bottom: 1px solid #4bb;
  border-top: 1px solid #4bb;
  width: 40px;
  height: 0.1em;
  position: absolute;
  top: calc(0.45em - 1px);
  margin-left: 10px;
}