Html 如何把垂直线左右的标志

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

.header容器{
/*填充：8px*/
底部边框：2件纯色浅灰色；
边缘顶部：20px；
}
.标志{
字体大小：12px；
字体大小：粗体；
位置：相对位置；
底部：-10px；
}
.col-md-1{
左边框：1px纯色灰色；
}
h4{
字体大小：粗体；
}

这里的标志
同侧盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲

在

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

---

更新：感谢besciualex的评论

在我看来，您需要的是使用伪选择器：：before和：：after。请尝试以下操作：

.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];
}

让我知道这是否有效。

您可以使用

行高

：

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

---

您可以使用CSS Flexbox进行此操作。将

.header容器

设置为flex容器。请看下面的代码片段：

.header容器{
/*填充：8px*/
底部边框：2件纯色浅灰色；
边缘顶部：20px；
显示器：flex；
对齐项目：居中；
}
.标志{
填充：0 10px；
右边距：10px；
字体大小：12px；
字体大小：粗体；
位置：相对位置；
右边框：1px实心；
左边框：1px实心；
自我调整：伸展；
显示器：flex；
对齐项目：居中；
}
h4{
字体大小：粗体；
}

标志
同侧盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲盲

如果您可以添加一个显示您想要的确切内容的图像，则会很有帮助。根据屏幕大小，第二列可能在第一列的下方。是否希望垂直线穿过该文本？On.logo:after删除left属性并添加right:0。这样你就不会强迫线路总是在55px之后，而是在标志结束的地方。这是一个很好的解决方案+1