CODEWITHSUNDEEP
css
Seal
Seal

Reputation: 1060

How can I create a single-line border in CSS?

I am trying to create a CSS border. The output I am trying to produce would look like this:

-------------- MFG -----------------

I would like a solid line instead of dashed, though.

Upvotes: 2

Views: 5294

Answers (3)

Siva Tumma
Siva Tumma

Reputation: 1701

html

<hr/>

css

hr{
    margin-top:30px;
    padding: 0;
    border: none;
    border-top: 1px solid #333;
    color: #333;
    text-align: center;
}
hr:after {
    content: "MFG";
    display: inline-block;
    position: relative; 
    top: -0.7em;  
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

jsfiddle

Upvotes: 1

Zzyrk
Zzyrk

Reputation: 905

HTML : 

<h1><span>MFG</span></h1>

CSS:

 h1 {border-top: 1px solid black; margin: 40px 0 0 0; }

 h1 span { position: relative; top: -25px; padding: 0 20px; background: white;}

EDIT

The container which will have --------MTG------- in it must have the following :

 text-align:center;

Upvotes: 3

Taraz
Taraz

Reputation: 1331

You'd use the <hr> tag.

There's an example here of what you're trying to do:

http://css-tricks.com/examples/hrs/

Upvotes: 0

Related Questions