CODEWITHSUNDEEP
css
udexter
udexter

Reputation: 2347

Title with border on the left and right of it with CSS

I basically need to reproduce the next image title, the "experience":

enter image description here

How I can do it?

Thank you!

Upvotes: 1

Views: 6837

Answers (3)

dimitar
dimitar

Reputation: 1057

https://jsfiddle.net/5jge1qnx/

HTML

<div class="title">
    <h1>Title</h1>
</div>

CSS

.title {
   width:100%;
   text-align:center; 
   position: relative;
}

h1 {
   position:relative; 
   padding:10px; 
   background: #f3f5f6;
   display: inline-block;
   z-index: 1;
}

.title::after {
   content:'';
   position: absolute;
   left: 0;
   right: 0;
   top: 50%;
   height: 1px;
   background: #000;
   z-index:0;
}

Be careful width the background of your titel! It's must be the same as the background of your parent element or body!

Upvotes: 2

Alexey Ivanov
Alexey Ivanov

Reputation: 8236

Something like this probably do the job: http://jsfiddle.net/R52sq/1/

Don't have floats. Have only one additional tag, can have content of any length (even larger then browser width).

Only drawback it probably didn't work in IE6, and possibly only partially work in IE7 (need testing in IE7 to be sure, don't have on current computer).

Upvotes: 3

jessedb
jessedb

Reputation: 159

Using divs this should do the trick:

HTML:

<div id="left"></div><div id="title">Experience</div><div id="right"></div>

CSS:

#left {
    width:40%;
    float:left;
    border-bottom:1px solid #CCC;
    height:20px;
}
#right {
    width:40%;
    float:left;
    border-bottom:1px solid #CCC;
    height:20px;
}
#title {
    width:20%;
    float:left;
    height:20px;
    text-align:center;
}

Upvotes: 0

Related Questions