Separator line with text « Blog « 4ppletree.me

Separator line with text

von Moritur am 25. July 2012

There are many snippets for separator lines out there but I didn’t find a single one with a text in the middle. Here you got one:

.separator {
    width: 100%;
    border-bottom: 1px solid #60636a;
    text-align: center;
    height: 18px;
    margin-bottom: 15px;
}
.separator span {
    line-height: 15px;
    padding: 0 10px;
    background: white; /* Color of the element below */
    display: inline-block;
    margin-top: 10px;
    color: #60636a;
}

.separator {

width: 100%;

border-bottom: 1px solid #60636a;

text-align: center;

height: 18px;

margin-bottom: 15px;

}

.separator span {

line-height: 15px;

padding: 0 10px;

background: white; /* Color of the element below */

display: inline-block;

margin-top: 10px;

color: #60636a;

}

This is the neccessary html:

<div class="separator">
    <span>or</span>
</div>

</div>

That’s how I needed the separator line:

Create a new account

Order as guest

Do you know a better method to do this? Maybe without a fixed background color?

2 Kommentare
Teile diesen Beitrag auf: Twitter, Facebook, Delicious, Digg, Reddit

2 Kommentare

good job. Nice code, works good.

by hit9 on 31. March 2013 at 07:07. Reply #

Thanks !!! this was exactly what I needed and works perfectly !

by Reni64 on 4. March 2014 at 15:28. Reply #

Was meinst du dazu?

Name Pflichtfeld.
Email Pflichtfeld. Wird nicht veröffentlicht.
Website Wenn du eine hast.
Kommentar

4ppletree.me – about:code