html - 如何在 Logo 的左侧和右侧放置垂直线

Question

我想在这个 Logo 文本的左边和右边放置垂直线，但是两条线都需要触及底部边框，这就是我现在所拥有的:这是一个代码笔:

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 的评论