如何根据我的文本两侧的屏幕分辨率自动附加div

Question

我正在尝试将它作为表名除了表名红色破折号之后我想根据屏幕大小动态追加这个破折号。在我的文本的两面。对不起，我的英语不好。给我一个建议如何制作它？

.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

只需使用媒体查询根据您的屏幕尺寸设置.dashes宽度。

.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>