CRover CRover - 4 years ago 60
CSS Question

How can I achieve the effect of a double line going through some text but not on top of it? Image in description

I've found this styling done to a heading text which I figure is a double border that is going through the text but isn't overlapping with it. Does anyone know how can I do the same to my h1 element?

Answer Source

Quick and dirty solution:

    h1 {
      position: relative;
      text-align: center;
     }
    h1:before {
      content: " ";
      position: absolute;
      height: 6px;
      width: 40%;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
      left: 0;
      top: 40%;
    }
    h1:after {
      content: " ";
      position: absolute;
      height: 6px;
      width: 40%;
      border-top: 1px solid black;
      border-bottom: 1px solid black;
      right: 0;
      top: 40%;
    }
    <h1>Title</h1>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download