JSFiddle - React, Tailwind, and code Playground

by HugoGiraudel

HTML

<h1>Ohai, dummy text!</h1>

CSS

body {
    /* Center the title */
    text-align: center;
    /* Avoid horizontal scroll bar */
    overflow: hidden;
    /* Set the background color you want here */
    background: #ffa;
}

h1 {
    /* Firefox 2 */
    display: -moz-inline-box;
    /* All browsers */
    display: inline-block;
    /* IE 6 and IE 7 */
    *display: inline;
    *zoom: 1;
    /* Enable absolute positioning for pseudo-elements */
    position: relative;
    /* Set the appropriate font size here */
    font-size: 30px;
    margin-top: 20px;
}

h1:after,
h1:before {
    content: "";
    position: absolute;
    height: 1px;
    width: 200%;
    top: 50%;
    right: 100%;
    /* Set the color of the line here */
    background: black;
}

h1:after { left: 100%; }

JavaScript

/* Should work in: 
 * IE5.5+
 * Firefox 2+
 * Chrome
 * Safari 3+
 * Opera 9
 * 
 * Safari Mobile 3+
 * Opera Mini 5+
 * Android browser 2+
 * Blackberry browser 7
 * Chrome for Android
 * Firefox for Android
 */