css - 如何在两个div之间添加垂直线

Question

我想在两个 div 之间做一条垂直线。据我所知，我们有 hr 用于水平线，但没有用于垂直线。有没有不使用 border 的方法？

<style>
#wrapper_1 {
    background-color:pink;
    height:100px;
    float:left;
    width: 100px;
}

#wrapper_2 {
    background-color:brown;
    height:100px;
    width: 100px;
    float:right;
}
</style>

<div id="wrapper_1">
    Creating slideshows PHP
</div> 

<div id="wrapper_2">
    Creating slideshows with WordPress 
</div>

Answer 1

您还可以使用伪元素来制作垂直分隔符。您不需要额外的 div 来制作分隔符，只需使用伪元素并根据您的需要设置样式即可。

#wrapper_1 {
  background-color: pink;
  height: 100px;
  float: left;
  width: 100px;
}
#wrapper_1:after {
  content: "";
  background-color: #000;
  position: absolute;
  width: 5px;
  height: 100px;
  top: 10px;
  left: 50%;
  display: block;
}
#wrapper_2 {
  background-color: brown;
  height: 100px;
  width: 100px;
  float: right;
}

<div id="wrapper_1">
  Creating slideshows PHP
</div>

<div id="wrapper_2">
  Creating slideshows with WordPress
</div>

PS:注意伪元素的绝对定位。谢谢。