<div class="c">
  <h2>  اعمال شبه عناصر روی یک خط افقی (<code>عنصر&lt;hr&gt;</code>)</h2>

  <hr>

  <p>محتوای داخل <code>&lt;hr&gt;</code> دو شبه عناصر است. شما نمی توانید شبه عناصر را در المان های جایگزین قرار دهید اما می توان آنها را در برخی عناصر بی اعتبار غیرجایگزین قرار داد .</p>
</div>

body {direction:rtl;
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 0 20px;
}

.c {
  max-width: 700px;
  margin: auto;
}

hr {direction:ltr;
  padding: 5px;
  background: lightpink;
  color: #444;
  display: block;
  overflow: hidden;
  border: solid 1px #444;
}

hr:before {
  content: "♪♪";
}

hr:after {
  content: " This is an <hr> element";
}

.p {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding-top: 130px;
}