Filigree Heading

A heading with top and bottom sub-headings with lines extending outward for a somewhat fancy display. Plus an example of collapsing the filigree lines down to the width of the title. Not quite ready for Chrome yet, though.

by Travis Almand

HTML

<div class='container'>
    <div class='top'>
        <div class='line'></div>
        <div class='text'><span>top</span></div>
        <div class='line'></div>
    </div>
    <h1 class='title'>title</h1>
    <div class='bottom'>
        <div class='line'></div>
    </div>    
</div>

<p>or</p>

<div class='container'>
    <div class='top'>
        <div class='line'></div>
        <div class='text'><span>top</span></div>
        <div class='line'></div>
    </div>
    <h1 class='title'>title</h1>
    <div class='bottom'>
        <div class='line'></div>
        <div class='text'><span>bottom</span></div>
        <div class='line'></div>
    </div>    
</div>

<p>or</p>

<div class='container'>
    <div class='top'>
        <div class='line'></div>
    </div>
    <h1 class='title'>title</h1>
    <div class='bottom'>
        <div class='line'></div>
        <div class='text'><span>bottom</span></div>
        <div class='line'></div>
    </div>    
</div>

<p>or</p>

<div class='container-center'>
    <div class='container-collapsed'>
        <div class='top'>
            <div class='line'></div>
            <div class='text'><span>top</span></div>
            <div class='line'></div>
        </div>
        <h1 class='title'>a much longer title</h1>
        <div class='bottom'>
            <div class='line'></div>
            <div class='text'><span>bottom</span></div>
            <div class='line'></div>
        </div>    
    </div>
</div>

CSS

.container {
    margin: auto;
    width: 75%;
}

.top, .bottom {
    display: table;
    width: 100%;
}

.text, .line {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: auto;
}

.line:before {
    border-top: 1px solid black;
    content: '';
    display: block;
}

.text {
    overflow: hidden;
    padding: 0 10px;
    width: 0;
}

.title {
    text-align: center;
}

.container-center {
    text-align: center;
}
.container-collapsed {
    display: inline-block;
}