CSS stripes for titles from sides

Question

I have this design that I have to code to HTML, but I got stuck on title section. This is what I want to do:

enter image description here

So when creating content with title, those stripes fits automatically according to the length of the title. Possible?

The solutions works great while border is 1px, my border is 7px thick and it becomes unaligned with text. How do I align a thicker border than 1px? — Optimus Prime, Mar 17 '14 at 09:45
Hmm solved with position: relative; top: 2px; how do I select this question as answered? — Optimus Prime, Mar 17 '14 at 09:48
You could always answer your questions. If you feel that it would be helpful for the others, post it as an answer :) — Hashem Qolami, Mar 17 '14 at 09:50

Developer · Answer 1 · 2014-03-17T10:10:27.940

checkout this link , if this works fine for you Try This demo

[http://jsfiddle.net/3Vqjg/]

Updated Demo

<div class="h-border">
  <div class="heading">
    <h2>About Me</h2>
  </div>
</div>

.h-border {
border-top: 1px solid #e3e3e3;
border-bottom: 1px solid #e3e3e3;
padding-top: 10px;
padding-bottom: 10px;
margin-top: 30px;
margin-bottom: 10px;
}

.heading {
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
/*background-image: url(../img/cross-pattern.png);
background-repeat: repeat;*/
background: #f00;
}

h2 {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
text-transform: uppercase;
margin: 0 auto;
padding: 0 10px;
background:#fff;
width:30%;
display: inline;
}

It would be better if you expanded your answer to explain the logic. — Hashem Qolami, Mar 17 '14 at 09:52

CSS stripes for titles from sides

1 Answers1