HR horizontal,vertical,inline

by Laurens Maneschijn

HTML

<div id="div0">
  <div id="div1">
    div1
  </div>
  <hr id="hr1" class="vertical">
  
  <div id="div2">
    div2
  </div>
</div>

<hr class="horizontal">

<div>
  aaa <hr class="vertical"> bbb<br>
</div>

<hr>

<div>
  aaa <hr class="vertical inline"> bbb<br>
</div>

<hr>

<div style="font-size: 40px;">
  aaa <hr class="vertical inline"> bbb<br>
</div>

<hr>

<div style="font-size: 40px; line-height: 40px;">
  aaa <hr class="vertical inline"> bbb<br>
</div>

CSS

div {background-color:#ccf;}
div > div {background-color:#8f8;}
#div0{}
#div1{
  display:inline-block;
}
#div2{
  display:inline-block;
}
#hr1{
}

hr.horizontal {
  display: block;
  margin: 5px 0;
  padding: 0;
  width: 100%;
  height: 0;
  border: 0;
  border-top: 2px solid #888;
}
hr.vertical{
  display:inline-block;
  margin: 0 5px;
  padding: 0 0 0 0;
  width: 0;
  height: 1.1em;
  border: 0;
  border-left: 2px solid #888;
  vertical-align: top;
}
hr.vertical.inline{
  display:inline;
  margin: 0 5px;
  padding: 0 0 0 0;
  width: 0;
  height: auto; /* should be same as line height */
  border: 0;
  border-left: 2px solid #888;
  vertical-align: baseline;
}