Splitting a border around another element

This is one of those “Can you do that, no you can’t do that, but can you really do that?” moments. Splitting the border of an element around another element. Although, I should put quotes around “splitting”. You’re not actually splitting a border, but rather creating the appearance of it.

First, what the heck am I talking about?

Okay, that’s kinda clever. “So…a table?” you might ask.

Nope, a single <span> .

“Wuuuuut?”

Let me show you.

The HTML

<div class= "heading" role= "banner" > <div class= "split-border" ><span></span></div> <div class= "logo" > <img src= "https://upload.wikimedia.org/wikipedia/en/3/34/SFDC_logo.png" alt= "Salesforce logo image" > </div> <h1> The World's No. 1 <br> CRM Solution </h1> </div>

Full disclosure: I don’t have “official” permission to use the Salesforce logo in this demo. So anything you don’t like here reflects on my crappy coding and not on Salesforce.

The CSS

Let’s review the styles that help define that border layout:

.heading .logo { text-align : center ; } .split-border { text-align : center ; } .split-border span { position : relative ; } .split-border span ::before , .split-border span ::after { border-top : 1px solid #fff ; content : "" ; position : absolute ; width : 5.625em ; } .split-border span ::before { margin-right : 3.75em ; right : 100% ; } .split-border span ::after { margin-left : 3.75em ; }

For starters, the logo image is center-aligned inside the parent <div> container:

.heading .logo { text-align : center ; }

The .split-border class also centers the <span> inside the parent container:

.split-border { text-align : center ; }

Now for the fun part…

The <span> element’s pseudo-classes each have a top border and a specified width:

.split-border span ::before , .split-border span ::after { border-top : 1px solid #fff ; content : "" ; position : absolute ; width : 5.625em ; }

That width value corresponds to the overall width of the container element, minus the width of the logo image. When we apply a margin to each pseudo-class (either margin-left or margin-right , respectively), the “split” effect is created:

.split-border span ::before { margin-right : 3.75em ; right : 100% ; } .split-border span ::after { margin-left : 3.75em ; }

And voila…

There you have it