如何使用CSS和Flexbox在选中的侧边导航项末尾显示箭头？

嘿，我来帮你搞定这个侧边导航的箭头需求！其实不用额外添加HTML元素，用CSS伪元素就能轻松实现，而且代码简洁易维护。

核心思路 #

我们可以利用CSS的::after伪元素，给带有.is-active类的导航链接（也就是选中的"Mappings"项）添加一个三角形箭头。通过设置边框的样式，就能画出需要的白色箭头，再通过定位让它固定在菜单项的右侧居中位置。

修改后的完整代码 #

CSS部分

.person-container { display: flex; }
.main-section { margin: 0px; padding: 10px; flex-grow: 2; }
ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; }
li a { display: block; color: #000; padding: 16px 16px; text-decoration: none; border: 0.2px solid #004563; border-bottom: 0px; }
li:last-child { border-bottom: 0.2px solid #004563; }
li a.is-active { 
  background-color: #004563; 
  color: white; 
  position: relative; /* 新增：让伪元素相对于当前链接定位 */
}
/* 新增：给激活项添加右侧白色箭头 */
li a.is-active::after {
  content: '';
  /* 用边框绘制三角形箭头 */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid white;
  /* 定位到右侧居中 */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}
li a:hover:not(.is-active) { background-color: #70c2e5; color: white; }

HTML部分（无需修改，保持你的原有代码即可）

<div class="person-container">
<nav class="side-nav">
<ul>
<li><a href="#home">Details</a></li>
<li><a href="#news">Addresses</a></li>
<li><a href="#contact">Hobies</a></li>
<li><a href="#about">Affiliates</a></li>
<li><a class="is-active" href="#about">Mappings</a></li>
<li><a href="#about">Notes</a></li>
</ul>
</nav>
<div class="main-section">
<h3>User Profile</h3>
<hr />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
</div>

关键代码解释 #

1. position: relative：给激活的链接添加相对定位，这样伪元素的绝对定位会以这个链接为基准，不会乱跑。
2. ::after伪元素：通过content: ''创建一个空的元素，然后利用边框属性绘制三角形：上下边框设为透明，左边框设为白色，这样就形成了指向右侧的箭头。
3. 定位与居中：用position: absolute把箭头固定在右侧，right: 10px控制和右边的距离，top: 50%加上transform: translateY(-50%)实现箭头在垂直方向上的居中对齐。

这样修改后，选中的"Mappings"菜单项右侧就会出现一个白色的箭头啦，完全符合你的预期效果！

内容的提问来源于stack exchange，提问作者jbl