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 https://i.sstatic.net/uCeeo.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;
}
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;
}
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%);
}