CODEWITHSUNDEEP
htmlcss
Slump
Slump

Reputation: 11

CSS Title with an horizontal line in the middle

I'm trying to make a horizontal rule with some text in the left.

for example:

my title -------------------------------------

I can do it by putting a background to the text but without the colored background, I can not

Is anybody has an answer ?

<style>   
h1 {
    font-weight:normal;
    line-height:0;
    height:0;
    border-bottom:1px solid #000;   
    vertical-align:middle;

}
</style>
<h1><span>my title</span></h1>

Thanks

Upvotes: 1

Views: 3210

Answers (2)

KatieK
KatieK

Reputation: 13843

Your suggestion of putting a background color on the span seems to work reasonably well. See it here.

Alternately, you could use a background image in place of the border on the h1. 

h1 { background: url(https://i.sstatic.net/nomLz.gif) repeat-x left center; }

h1 span {
    background-color: #FFF;
    padding-right: 3px;
}

Example.

(A 1x1 black image for the background.1)

Upvotes: 4

Rdpi
Rdpi

Reputation: 581

without using the background you could try with:

<style>   

span:after{
    content:"-------------------------------------";
}
</style>
<h1><span>my title</span></h1>

In this case you are using the CSS :after pseudo class. Have a look to this article to check cross-browser compatibility. And here you will find a pre-coded example.

Hope it helps!

Upvotes: 1

Related Questions