如何在li元素中添加全高的左边框？

Question

我正在创建一个简单的菜单，但我在边框中遇到了问题。我必须在 li 元素中显示完整的左边框。你能帮我吗？

我得到这样的输出。 我需要这样的输出。

body{
	margin: 0;
	padding: 0;
}
.dash-menu
{
background-color: #763E9B;
width: 100%;
min-height: 100px;
color: #fff;
}
.dash-menu h2
{
	float: left;
}
.dash-header ul
{
	float:right;
	list-style: none;
}
.dash-header li{
	float: left;
	margin: 20px;
}
.dash-header li:before{
content: '|';
color: #A569BD;
display: inline-block;
border-left: 3px solid yellow; 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="dash-menu">
	<h2>Hi , Welcome back</h2>
<div class="dash-header">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li><i class="fa fa-bars" aria-hidden="true"></i></li>
</ul>
<img src="">
</div><!--dash-header-->
</div><!--dash-menu-->

Answer 1

我很快就把它组合在一起，所以我确信它可以以更优雅的方式完成。https://jsfiddle.net/3tqxogLk/

我将 border-left 放在 li 本身上而不是 :before 上，所以我添加的所有代码都在这里：

.dash-header li{
  float: left;
  height: 20px;
  margin-top: -20px;
  padding-top: 40px;
  padding-bottom: 44px;
  border-left: 3px solid yellow; 
}