<span class="dashes">Hello WOrld</span>

<style type="text/css">
 .dashes { font-weight: bold; }
 .dashes:before, .dashes:after { content:"----"; color:#f00; }
</style>

<h4 class="sidelines"><span>Hello WOrld</span></h4>
<style type="text/css">
h4.sidelines { text-align: center; border-bottom: 1px solid #f00; height: 0.5em; }
h4.sidelines span { display: inline-block; background: #fff; padding:0 0.25em; }
</style>

p:before,p:after  {
  content: "---";
 }

<p>Hello WOrld</p>

<div class="line"></div>
<div class="text">Hello WOrld</div>
<div class="line"></div>

.line
{
  width:100px;background-color:black;
  border: 0.1em solid black; /* dashed, groove, inset */
  margin-top:0.45em;margin-bottom:0.45em;
}

.line, .text
{
  float:left;
}

.text
{
  padding-left:10px;padding-right:10px;
}