Pure CSS for `hr` element with caption

horizontal-ruler-with-caption.scss

$size:       1rem;
$background: white;

hr[title] {
    line-height: 0;

    &::after {
        background: $background;
        content: attr(title);

        // Leaving width on auto allows it to be adjusted according to the content
        // but we need to specify the height for the positioning to work
        height: $size;
        line-height: $size;

        // Give it a bit of breathing room
        padding: 0 $size;

        // Horizontally center it
        display: table;
        margin: 0 auto;

        // Vertically center it above the ruler
        position: relative;
        top: -($size / 2);
    }
}

Just specify the caption text with the title attribute, like so:

<hr title="OR" />

Will render a horizontal ruler, aka a line, with the text "OR" in the center.

In pure css that becomes:

hr[title] {
    line-height: 0;
}

hr[title]::after {
    background: white;
    content: attr(title);
    display: table;
    height: 1rem;
    line-height: 1rem;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    top: -0.5rem;
}