Dotted top and bottom border shorter than text - html

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>

Answer 3

Here is another approach using radial-gradient background image to produce the dots at the top and bottom. The output is responsive and the no. of dots at the top and bottom are determined by the width (for example, width: 108px produces 9 dots as background-size in x-axis is 12px).
The advantage of this approach over the others is that this allows greater control over the size of the dots and the space in between the dots. The downside is the browser support for radial-gradient which is lower (IE10+) compared to dotted border method.
h1 {
position: relative;
text-align: center;
font-size: 48px;
line-height: 1em;
padding: 0.625em;
font-family: Calibri;
font-weight: 100;
}
h1:after {
position: absolute;
content: '';
width: 108px; /* multiples of background-size in X-axis */
height: 100%;
top: 0px;
left: calc(50% - 50px);
background: radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 30%, transparent 50%), radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 30%, transparent 50%);
background-size: 12px 6px;
background-repeat: repeat-x;
background-position: 50% 0.125em, 50% 2em;
}
/* Just for demo */
body {
background: rgb(9, 133, 143);
color: white;
}
<!-- library included to support older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h1>How it works</h1>
<h1>How it works with long text</h1>
Screenshot with large dots:
All that is needed to be done to make the dots smaller in size is to reduce the color-stop percentages of the radial gradient. The smaller the percentages, the smaller the dots.
h1 {
position: relative;
text-align: center;
font-size: 48px;
line-height: 1em;
padding: 0.625em;
font-family: Calibri;
font-weight: 100;
}
h1:after {
position: absolute;
content: '';
width: 108px; /* multiples of background-size in X-axis */
height: 100%;
top: 0px;
left: calc(50% - 50px);
background: radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 25%, transparent 35%), radial-gradient(circle at 50% 50%, rgb(250, 189, 38) 25%, transparent 35%);
background-size: 12px 6px;
background-repeat: repeat-x;
background-position: 50% 0.125em, 50% 2em;
}
/* Just for demo */
body {
background: rgb(9, 133, 143);
color: white;
}
<!-- library included to support older browsers -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h1>How it works</h1>
<h1>How it works with long text</h1>
Screenshot with smaller dots: