Finally, A Responsive, Low-maintenance Interstitial

Update: As of 11/18/19 I found that Chrome 78 and Firefox 70 no longer render the padding-right: 100% on the interstitial__line pseudo elements. This caused the pseudo elements to have no width, but changing the percent unit to vw works. The code in this article and the CodePen demo have been updated.

At Zoosk we often use a pattern we call an interstitial. It’s a word or short phrase flanked on the left and right by a line, and it vertically separates two sections or options on a page. In the screenshot below, the phrase “or confirm with” separates two ways to confirm your email address on Zoosk.

For this pattern, the text and lines must not overlap even if the text is dynamic. (This is the case for us; Zoosk supports 27 languages.) There are a few solutions for this, and they essentially do the same thing — in a nutshell you can apply a top border to an element then position another element containing your text on top of it. These solutions require applying a background color to the text-containing element that matches its parent’s background color. This way the text element covers up the line behind it. This generally works pretty well. If, however, you want a background pattern, responsive interstitial lines, or a solution that requires a little less maintenance, we have an answer for that.

The HTML markup

The markup for the interstitial follows:

<div class=”interstitial”>
    <span class=”interstitial__line--left interstitial__line”></span>
    <span class=”interstitial__text”>
        A responsive interstitial — The lines’ length will change based on the text. Also works on smaller screens.
    </span>
    <span class=”interstitial__line--right interstitial__line”></span>
</div>

The main interstitial container serves to hide excess length from the lines, which will be explained later. The two interstitial__line spans render the left and right lines around the text. It’s best to use spans as the children elements within interstitial. Spans next to each other will move horizontally in response to content changes in other spans. This is key for adjusting the line widths with dynamic strings.

The CSS (written in SCSS syntax)

As mentioned the interstitial div hides the extra length of the lines when overflow is set to hidden. Optionally you can define max-width or width. A responsive interstitial requires a percent value. Since interstitials usually look best when centered on a page, we included auto left and right margins in our example below.

.interstitial {
    overflow: hidden; // Hides the excess lines
    margin: 0 auto; // Optional
    max-width: 90%; // Optional
}

The lines are rendered using :before pseudo elements on the interstitial__line spans.

.interstitial__line {
    position: relative;
    &:before {
        border-top: 6px double; // Customizable
        content: '';
        height: 0;
        padding-right: 100vw;
        position: absolute;
        top: 50%; // Customizable but this is our default
    }
    &--left { // Parent class of span that renders the left line
        &:before {
            right: 10px; // The gap between the right end of the line and the text. Customizable.
        }
    }
    &--right { // Parent class of span that renders the right line
        &:before {
            left: 10px; // The gap between the left end of the line and the text. Customizable.
        }
    }
}

Let’s first tackle the :before element styles. The right padding makes the pseudo element, and therefore the border, as long as the viewport’s width. (Left padding can be used instead of right; they both have the same effect.) This is why we set overflow: hidden on the interstitial div. Because we defined the right property on the interstitial__line--left span, any width changes will flow away from the text toward the left of the page. The same goes for the interstitial__line--right span; however, its width flows in the opposite direction because we set a left value on this element. These techniques ensure the text and lines don’t overlap. We can also use the left and right values to customize the gap between each line and the text.

The interstitial__text does not require many styles:

.interstitial__text {
    display: inline-block;
    max-width: 60%; // Customizable. Max-width as a percent will make the text and lines responsive.
    vertical-align: middle;
}

Responsive interstitials require max-width as a percent, and we set display to inline-block so this property will take effect on the span. A couple of warnings: Defining max-width in pixels, rems, or ems might cause the lines to disappear on small screens depending on your string length. Also, using width instead of max-width can cause unexpected large gaps around your text if your dynamic content is short. So use max-width if you want the lines to automatically and consistently adjust with your text.

If you insist on using a non-percent value for max-width, you’ll need to use media queries to change max-width at your desired breakpoints to keep the lines visible.

A working example of this responsive interstitial is available on CodePen.