Dashed separator with dashed text in the middle

Question

I was trying to do a dashed separator with text in the middle but I can't get the text to touch the dasshed lines.

ps: I am using foundation to make the divs responsive.

My HTML code:

<div class="row">
    <div class="large-5 medium-5 columns sparator">
    </div>
    <div class="large-2 medium-2 columns">
        <center><span class="textSeparator"> Look Of The Day</span></center>
    </div>
    <div class="large-5 medium-5 columns sparator">
    </div>
</div>

CSS for columns:

.columns {
    min-height: 20px;
}

CSS for separator:

.sparator {
    border: 0;
    border-bottom: 1px dashed #ccc;
}

CSS for textSeparator:

.textSeparator {
    border: dashed 1px #ccc;
    margin-left: auto;
    text-align: center;
    font-size: 15px;
    padding: 5px;
}

The final result is:

As you can see the box where the text is have some blank space between the dashes, I want them to touch, how can I do it? I tried to use margin-left and margin-right but they cancel each other.

Answer 1

Just use position: absolute; to put an element in the center of another, and assign a border-bottom to the container. Don't forget to add prefixes for transform for older browsers.

Fiddle for you

<div class="container">
    <span>Some Text Here</span>
</div>

.container {
    margin-top: 20px; /* for display in fiddle */
    position: relative;
    border-bottom: 1px dashed #ccc;
}

.container span {
    background-color: #fff;
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translate(-50%); /* need -webkit- and -moz- also for older browsers */
    border: 1px dashed #ccc;
    padding: 5px;
}