JSFiddle - React, Tailwind, and code Playground

header with an inline stroke

by Jennifer Perrin

HTML

<h1 class="inline-stroke">This is a Header with an Inline Stroke</h1>

<p>Beef ribs shankle ham hock cow chuck pork loin. Pig bresaola ribeye t-bone short ribs, strip steak capicola corned beef tri-tip rump. Pork loin jerky meatball brisket prosciutto. Shank venison short loin, drumstick brisket bacon ham hock ribeye hamburger frankfurter filet mignon corned beef jowl. Biltong pastrami capicola t-bone sausage fatback. Shankle bacon boudin ham sausage. Corned beef frankfurter tenderloin venison, shank pastrami spare ribs meatball swine pancetta.</p>

<h1 class="inline-stroke another-style">Another Style</h1>

<p>Beef ribs shankle ham hock cow chuck pork loin. Pig bresaola ribeye t-bone short ribs, strip steak capicola corned beef tri-tip rump. Pork loin jerky meatball brisket prosciutto. Shank venison short loin, drumstick brisket bacon ham hock ribeye hamburger frankfurter filet mignon corned beef jowl. Biltong pastrami capicola t-bone sausage fatback. Shankle bacon boudin ham sausage. Corned beef frankfurter tenderloin venison, shank pastrami spare ribs meatball swine pancetta.</p>

CSS

body {
    background: #e6e6e6 url(http://noisepng.com/100-90-5-monochrome.png) 0 0 repeat;
    overflow: hidden;
    padding: 50px;
}
h1 {
    font: 20px/1.2 sans-serif;
}
p {
    text-align: left;
}
em {
    display: block;
    text-align: right;
}

/* Inline Stroke */

.inline-stroke {
    background: #e6e6e6 url(http://noisepng.com/100-90-5-monochrome.png) 0 0 repeat;
    display: table;
    margin: 0 auto;
    padding: 0 10px;
    position: relative;
}
.inline-stroke + p {
    clear: left;
    position: relative;
}
.inline-stroke + p:before {
    border-bottom: 1px solid #a6a6a6;
    border-top: 1px solid #a6a6a6;
    content: '';
    height: 2px;
    position: absolute;
    right: 0;
    top: -30px;
    width: 100%;
    z-index: -10;
}

/* Another Style */

.another-style + p:before {
    background: #333;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,hsla(0,0%,0%,0)), color-stop(50%,hsla(0,0%,0%,.75)), color-stop(100%,hsla(0,0%,0%,0)));
    background: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:    -moz-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:     -ms-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:      -o-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    background:         linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,.75) 50%, hsla(0,0%,0%,0) 100%);
    border: none;
    height: 1px;
    top: -28px;
}