I am building a side navigation component and one of the requirement is to show a white arrow at the end of selected item. I am not quite sure how to achieve it. Here is the expected behavior, if you notice the mappings selected menu item has a white arrow at the end of it.

[![enter image description here](https://i.stack.imgur.com/SMQsp.png)](https://i.stack.imgur.com/SMQsp.png)

Here is the code snippet with html and css bits that I have so far. I did some research and looks like may be it can be achieved by using css border manipulation of an extra element sitting next anchor tag, but I could not quite get to the bottom of it.

```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;
}
```

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