ロゴの左右の縦線の挿入方法

Question

このロゴの左右に縦線を入れたいが、下の境界線にタッチする必要があります。これは私の現在のコードです：

http://codepen.io/anon/pen/ZBMXbw

.header-container { 
 
    /*padding: 8px;*/ 
 
    border-bottom: 2px solid lightgrey; 
 
    margin-top: 20px; 
 
} 
 
.logo { 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    position: relative; 
 
    bottom: -10px; 
 
} 
 
.col-md-1 { 
 
    border-left: 1px solid grey; 
 
} 
 
h4 { 
 
    font-weight: bold; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="header-container col-md-8 col-md-offset-2"> 
 
     <div class="col-md-1 logo">Logo here</div> 
 
     <div class="col-md-11"> 
 
     <h4>lorem ipsum lorem lorem</h4> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

.logo上の擬似要素を使用します。を更新し

.logo:before { 
    content: ''; 
    position: absolute; 
    left: 0; /* adjust as you need */ 
    top: 0; 
    width: 1px; 
    height: 30px; 
    background-color:grey; 
} 

.logo:after { 
    content: ''; 
    position: absolute; 
    right: 0; /* adjust as you need */ 
    top: 0; 
    width: 1px; 
    height: 30px; 
    background-color:grey; 
} 

Demo

：このようbesciualex

Answer 2

でコメントするおかげで、あなたが必要なの疑似セレクタを使用する::前と::の後にあるように私には思えます。以下を試してください：

.logo::before { 
    content: ''; 
    display:inline-block; 
    width: 1px; 
    height: [put the desired height here]; 
    margin: [adjust margins]; 
} 
.logo::after{ 
    content: ''; 
    display:inline-block; 
    width: 1px; 
    height: [put the desired height here]; 
    margin: [adjust margins]; 
} 

これが動作するかどうか教えてください。

Answer 3

Updated copen。

あなたはline-heightを使用することができます。

.logo { 
    font-size: 12px; 
    font-weight: bold; 
    position: relative; 
    bottom: -10px; 
    line-height: 30px; 
} 

.col-md-1 { 
    border-left: 1px solid grey; 
    border-right: 1px solid grey; 
} 

Answer 4

あなたはこのためにCSSフレキシボックスを使用することができます。 .header-containerをフレックスコンテナにしてください。

.header-container { 
 
    /*padding: 8px;*/ 
 
    border-bottom: 2px solid lightgrey; 
 
    margin-top: 20px; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.logo { 
 
    padding: 0 10px; 
 
    margin-right: 10px; 
 
    font-size: 12px; 
 
    font-weight: bold; 
 
    position: relative; 
 
    border-right: 1px solid; 
 
    border-left: 1px solid; 
 
    align-self: stretch; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
h4 { 
 
    font-weight: bold; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="header-container col-md-8 col-md-offset-2"> 
 
      <div class="item logo">Logo</div> 
 
      <div class="item"> 
 
       <h4> 
 
        lorem ipsum lorem lorem 
 
       </h4> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

・ホープ、このことができます：以下のスニペットを見て！