JSFiddle - React, Tailwind, and code Playground

HTML

<h3>With <code>:after</code></h3>

<ul id="after" class="menu">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
</ul>

<h3>With additional <code>span</code></h3>

<ul id="span" class="menu">
    <li><a href="#">Item 1 <span>»</span></a></li>
    <li><a href="#">Item 2 <span>»</span></a></li>
</ul>

CSS

body {
    font-family: Arial, sans-serif;
}

h3 {
    margin: 10px 0;
    font-size: 16px;
    font-weight: bold;
}

.menu {
    border: 1px solid #1B1B1B;
    border-width: 1px 1px 0 1px;
    width: 274px; 
}

.menu a {
    padding: 5px 0px; 
    background: #666; 
    text-align: center; 
    border-bottom: 1px solid #1B1B1B;
    color: white;
    display: block;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(0,0,0,0.8);
}

.menu a:hover {
    background-color: #444;
}

#after a:after {
    content: '»';
    float: right;
    margin-right: 10px;
}

#span a span {
    float: right;
    margin-right: 10px;
}