html - 如何使用 css 和 flexbox 在所选侧导航项的末尾显示箭头？

Question

我正在构建一个侧面导航组件，其中一个要求是在所选项目的末尾显示一个白色箭头。我不太确定如何实现它。这是预期的行为，如果您注意到映射选择的菜单项在其末尾有一个白色箭头。

这是到目前为止我拥有的带有 html 和 css 位的代码片段。我做了一些研究，看起来可能可以通过使用位于下一个锚标记的额外元素的 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;
}

li a:hover:not(.is-active) {
  background-color: #70c2e5;
  color: white;
}

<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>

标签： htmlcssflexbox

Answer 1

使用 :after 添加 CSS

li a.is-active {
  background-color: #004563;
  color: white;
  position:relative;
}
li a.is-active::after {
    right: 0%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
    border-right-color: #fff;
    border-width: 10px;
    margin-top: -10px;

}

.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:hover:not(.is-active) {
  background-color: #70c2e5;
  color: white;
}

li a.is-active::after {
    right: 0%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
	border-right-color: #fff;
	border-width: 10px;
	margin-top: -10px;
	
}

<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>