Here is a simple example using border-right
. For a simple effect like that green rectangle (which in fact is a border) this approach is preferrable to using a pseudo-element.
HTML
<ul class="menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
CSS
.menu {
list-style: none;
background: #555;
width: 200px;
padding: 1em 0;
}
.menu a {
padding: 0.5em 1em;
display: block;
text-decoration: none;
color: white;
font-family: 'sans-serif';
}
.menu a:hover, .menu a:focus {
background-color: rgba(255, 255, 255, 0.1);
border-right: 5px solid lightgreen;
}