How to create both-sided dotted line around a title?

Question

I'm trying to achieve a title (h1) at the top of a template like the following (the dots represent a vertically centered dot-image-line):

title example http://www.pixelplus.nl/klanten/klijsen/example.jpg

Usually I'd do this:

<h1><span>This is a title</span></h1>

Center the text in the h1 and add a background-color to the span as well as a little padding.

In the current project I'm dealing with a transparent background over a background-image. So... the background-colored span won't fly.

After trying a few things this comes closest:

<header class="headerPage">
    <div class="row">
        <div class="dotted">&nbsp;</div>
        <div class="title"><h1>This is a title</h1></div>
        <div class="dotted">&nbsp;</div>
    </div>
</header>

And this CSS:

header.headerPage {
    display: table;
    margin: 0 0 35px;
    width: 100%;
}
header.headerPage .row {display: table-row;}
header.headerPage .row div {display: table-cell;}
header.headerPage .row div.dotted {
    width: 10%;
    background: url('../img/line-dotted.svg') left center repeat-x transparent;
}
header.headerPage .row div.title {
    padding: 0 15px;
    text-align: center;
}
header.headerPage .row div.title > * {display: inline;}
header.headerPage .row div h1 {margin: 0;}

As you can see the header acts as a table. The problem is in the width: 10%; of the dotted-divs. How do I get these to have a variable width relative to the dynamic height of the h1? Hope this can be done in css / scss.

Answer 1

This solution is adapted from this answer : Line separator under text and transparent background

The dotted line will stay verticaly centered according to the height of the text (font-size, multiple lines) and adapt to the width of the text :

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body{
    background-image: url(http://fr.playstation.com/media/5ZfqPjVF/BigSkyInfinity_Hero_EN.JPG);
    background-repeat:no-repeat;
    background-size:100% auto;
    font-family: 'Open Sans', sans-serif;
}

.divider{
    color:#ccc;
    width:70%;
    margin:20px auto;
    overflow:hidden;
    text-align:center;   
    line-height:1.2em;
}

.divider:before, .divider:after{
    content:"";
    vertical-align:middle;
    display:inline-block;
    width:50%;
    border-bottom:2px dotted #ccc;
    margin:0 2% 0 -55%;
}
.divider:after{
    margin:0 -55% 0 2%;
}
h1:nth-child(2){
    font-size:3em;
}
span{
  display:inline-block;
  vertical-align:middle;
  }

<h1 class="divider">Today</h1>
<h1 class="divider">Today News</h1>
<h1 class="divider"><span>Today News<br/>More text<span></h1>

Note that if you don't have multiple lines, the effect can be achieved without the <span> and with only one tag.

Answer 2

You can use pseudo elements to do this:

DEMO

body {
  background: tomato;
  /* or whatever */
}
h1 {
  text-align: center;
  overflow: hidden;
}
span {
  display: inline-block;
  position: relative;
  padding: 0 10px;
}
span:before,
span:after {
  content: '';
  display: block;
  width: 1000px;
  position: absolute;
  top: 0.73em;
  border-top: 1px dotted black;
}
span:before {
  right: 100%;
}
span:after {
  left: 100%;
}
.small {
  font-size: 10px;
}

<h1><span>Text</span></h1>

<h1><span>Lengthy Text</span></h1>

<h1><span>Very Lengthy Text</span></h1>

<h1><span class="small">Smaller Font</span></h1>

Answer 3

You should use a dotted image in the background of h1, and use background color of span, give h1 padding from right and left to show background.

Answer 4

DEMO

Not exactly sure what you wanted but this was my conclusion.

METHOD 1: USING YOUR CODE

header.headerPage {
    display: table;
    margin: 0 0 35px;
    width: 100%;
}
header.headerPage .row {display: table-row;}
header.headerPage .row div {display: table-cell;}
header.headerPage .row div.dotted {
    width: 10%;
    background: #ed8;
    border-bottom:1px dotted #000;
}
header.headerPage .row div.title {
    padding: 0 15px;
    text-align: center;
    background: #ed8;
}
header.headerPage .row div.title > * {display: inline;}
header.headerPage .row div h1 {margin: 0;}

<header class="headerPage">
    <div class="row">
        <div class="dotted">&nbsp;</div>
        <div class="title"><h1>Klijsen, bijna 50 jaar ervaring</h1></div>
        <div class="dotted">&nbsp;</div>
    </div>
</header>

METHOD 2: OPTIMIZED CODE

As per your comments here is a much trimmed down version using less code and a little slight of hand to create the effect (I think) you wanted.

.headerPage .row{
    width:100%;
    background: #ed8;
    border-bottom:1px dotted #000;
    text-align:center;
}
.headerPage .title {
    padding: 0 10px;
    border-bottom:2px solid #ed8;
    font-size:28px;
    font-weight:bold;
}

<header class="headerPage">
    <div class="row">
        <span class="title">Klijsen, bijna 50 jaar ervaring</span>
    </div>
</header>

Answer 5

As mentioned in the comment already, you can try a modification of this answer to a similar question.

CSS:

        h1 {
            position: relative;
            width: 100%;
            text-align: center;
        }
        h1 .text {
            position: relative;
            display: inline-block;
            background: white;
            margin: auto;
        }
        h1 .filler {
            position: absolute;
            left: 0;
            right: 0;
            border-bottom: dotted 1px black;
            height: 50%;
        }

and HTML:

    <h1><div class="filler"></div><div class="text">Your Title</div></h1>

Essentially the text's background will hide the filler's bottom border where the text is. You can hide more of the border by applying padding left and right in the text element.