JSFiddle - React, Tailwind, and code Playground

Line-On-Sides Headers

by Jennifer Perrin

HTML

<div class="box">
    <h1>This one does not have<br /><code>overflow: hidden;</code></h1>
  <p>Instead this makes a pseudo table</p>
  <h2>And transforms the borders in a very interesting way!</h2>
</div>

<p>This works as a separator (see, quite dynamic, you don't need to contain it in a box)</p>

<div class="box">
  <h1>Browser support is interesting...</h1>
  <p>Works best in</p>
  <h2>Firefox</h2>
  <p>Chrome and IE9+ uses ... I don't know what ... to calculate the table width.</p>
  <h2>Older browsers</h2>
  <p>Don't look as good, but "acceptable"</p>
</div>


<p>So that's it?</p>

<div class="box" style="width: 25em">
  <h1>No!</h1>
  <p>Give a width to a container...</p>
  <h2>And everyone agrees!</h2>
  <p>Yup, yup</p>
</div>

<p>In short: safe to use. Best in Firefox, Chrome and IE9+. IE8 does not support transforms, but you get lines anyway.</p>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway);

html {
  background: radial-gradient(ellipse at center 25%, #fff, #2f4f4f) no-repeat;
  min-height: 100%;
}

body {
  font-family: 'Raleway', Georgia, serif;
  margin: 0 2em;
  text-align: center;
  color: #333;
}

.box {
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(47, 79, 79, .3);
  display: inline-block;
  margin: 2em;
  padding: .5em 1em;
  position: relative;
}

h1,h2 {
  margin: 0;
  text-transform: uppercase;
}

code {
  text-transform: none;
}

p {
  border-collapse: separate;
  display: table;
  margin: .5em 0;
  white-space: nowrap;
  width: 100%;
}

p:before,p:after {
  background: rgba(255, 255, 255, .1);
  border-bottom: 4px solid DarkOliveGreen;
  border-top: 4px solid DarkOliveGreen;
  border-color: rgba(0, 48, 0, .4);
  content: '';
  display: table-cell;
  width: 49%;
}

p:before {
  -ms-transform: scaleY(.25) translateX(-.25em);
  -webkit-transform: scaleY(.25) translateX(-.25em);
  transform: scaleY(.25) translateX(-.25em);
}

p:after {
  -ms-transform: scaleY(.25) translateX(.25em);
  -webkit-transform: scaleY(.25) translateX(.25em);
  transform: scaleY(.25) translateX(.25em);
}