How can i make automatically append divs with based on screen resolution both sides of my text

Question

I am trying make it as a name of table besides table name red color dashes is there i want to append this dashes dynamically based on screen size . on both sides of my text . sorry for my bad English. give me a Suggestion how to make it ?

 .container{ width:100%; height:30px; background:blue; text-align:center; } .container span{ color:#fff; } .container .dashes{ display:inline-block; width:5px; height:5px; background:red; vertical-align:middle; } 

 <div class="container"> <div class="dashes"></div> <span>Name</span> <div class="dashes"></div> </div> 

Answer 1

Just set the .dashes width as per your screen size using media-query.

 .container{ width:100%; height:30px; background:blue; text-align:center; padding-top: 10px; } .container span{ color:#fff; } .container .dashes{ display:inline-block; width:200px; height:0; background:red; vertical-align:middle; border: 2px dashed blue; } 

 <div class="container"> <div class="dashes"></div> <span>Name</span> <div class="dashes"></div> </div>