html - 如何与 li last-child 在同一行中创建水平线

Question

想问下如何用css创建线条如下图？ 该行一直在菜单下，但不在 04 旁边。请帮我。谢谢。 https://codepen.io/rae0724/pen/xWMRgd

<div class="menu-wrapper">
  <ul class="menu">
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
  </ul>
</div>

.menu-wrapper {
    position:fixed;
    top: 0;
    left: 0;
    height: auto;
    z-index: 9;
    width: 100%;
}
.menu{
    margin: 0;
    padding: 0 0 0 20px;
}
.menu li {
    display: inline-block;
    margin: 10px;
}
.menu li a{
    text-decoration:none;
    color: blue;
    padding: 6px 12px;
    display: block;
}

Answer 1

.menu-wrapper {
	position:fixed;
	top: 0;
	left: 0;
	height: auto;
	z-index: 9;
	width: 100%;
}
.menu{
	margin: 0;
	padding: 0 0 0 20px;
}
.menu li {
	display: inline-block;
	margin: 10px;
}
.menu li a{
	text-decoration:none;
	color: blue;
	padding: 6px 12px;
	display: block;
}
.menu:after {
   content: " ";
    width: 150px;
    height: 2px;
    background: red;
    position: absolute;
    top: 25px;
}

<div class="menu-wrapper">
  <ul class="menu">
    <li><a href="#1">1</a></li>
    <li><a href="#2">2</a></li>
    <li><a href="#3">3</a></li>
    <li><a href="#4">4</a></li>
  </ul>
</div>