どのように私は自動的にテキストの両面の解像度に基づいてdivを追加することができます

Question

テーブル名の外にテーブルの名前として作ろうとしています赤い色のダッシュがあります。私のテキストの両側に。私の悪い英語を申し訳ありません。私にそれを作る方法を提案してください？ただ、メディアクエリを使用して、あなたの画面サイズごとに.dashes幅を設定

.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

。そして前：

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