Dotted top and bottom border shorter than text

Question

I want to achieve border top and bottom like below image how can I achieve with CSS tricks?

Challenge is I don't want entire width with border and it should be responsive too.

Mobile version image is http://i.imgur.com/XZTW28N.jpg and it should work in desktop and mobile browser too.

I tried with %width border but it's not working.

I wrote below code but it's not 100% perfect answer for me.

HTML:

<h1>How it Works</h1

CSS:

h1:before, h1:after {
    content: "";
    height: 1px;
    background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(147,147,147,1) 50%,rgba(0,0,0,0) 100%);
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
}

http://jsfiddle.net/wjhnX/488/

Answer 1

I made a few changes in your CSS:

h1{
    text-align: center;
    font-size: 70px;
}

h1:before, h1:after{
    position: relative;
    content: "";
    width: 30%;
    left: 35%;
    display: block;
    margin-bottom: 10px;
    margin-top: 10px;
    border-bottom: 5px dotted yellow;
}

DEMO

EDIT:

If you want a fixed width you can add:

h1:before, h1:after{
    width: 150px;     /* You can change this value */
    left: 50%;
    transform: translateX(-50%);
}

DEMO2

Answer 2

You can use box-shadows also to achieve this, first create an after psuedo-element on top and a before pseudo-element on bottom then give the two of the box-shadows

body{
	background:#09858F;
}

div{
	position:relative;
	display:inline-block;
	margin:100px;
}
h1{
	text-align:center;
	font-family: Calibri;
	font-size:50px;
	color:#fff;
	margin:50px;
}

h1:after{
	content:"";
	position:absolute;
	left:30%;
	height:10px;
	width:10px;
	background:yellow;
	top:20%;
	border-radius:50%;
	box-shadow:20px 0 0 0  yellow,40px 0 0 0  yellow,60px 0 0 0  yellow,80px 0 0 0  yellow,100px 0 0 0  yellow,120px 0 0 0  yellow,140px 0 0 0  yellow,160px 0 0 0  yellow;
}
h1:before{
	content:"";
	position:absolute;
	left:30%;
	height:10px;
	width:10px;
	background:yellow;
	bottom:20%;
	border-radius:50%;
	box-shadow:20px 0 0 0  yellow,40px 0 0 0  yellow,60px 0 0 0  yellow,80px 0 0 0  yellow,100px 0 0 0  yellow,120px 0 0 0  yellow,140px 0 0 0  yellow,160px 0 0 0  yellow;
}

<div><h1>How it Works</h1></div>