CSS :before style

Question

I want to achieve something like this on the hover state of the menu element:

I cannot achieve it with :after border property for some reasons, maybe lack of knowledge.

Here you can see what I have so far. As you can see my :before selector is not perfectly aligned with the a tag and I don't have the nice isosceles triangle. Do you think it would be easier with background image?

Answer 1

You can use the :before selector as you stated in your question and mix it with some absolute positioning and you get the effect you require.

This will obviously need a bit more cleaning up to get it to your liking but this is a good general starting point.

ul {
  float: right;
  text-align: right;
}
li {
  list-style: none;
  padding: 5px;
}
li:hover {
  background: red;
  position: relative;
}
li:hover:before {
  content: '';
  position: absolute;
  top: 0;
  left: -10px;
  border-top: 14px solid red;
  border-bottom: 14px solid red;
  border-left: 10px solid transparent;
}

<ul>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ul>

Answer 2

I hope this can help you

body {
    margin: 0;
    background-color: aqua;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: right;
}

a {
    color: #ccc;
    display: inline-block;
    padding: 5px 20px 5px 15px;
    text-decoration: none;
    text-transform:uppercase;
    position: relative;
    
}

a.active, a:hover {
    background-color: crimson;
    color: white;
}

a.active::before,
a:hover::before,
a.active::after,
a:hover::after
{
    position: absolute;
    left: -15px;
     content: " ";
    width: 0;
    height: 0;
    border-style: solid;
}

a.active:before,
a:hover:before {
    
    
    border-width: 0 15px 15px 0;
    border-color: transparent crimson transparent transparent;  
    top: 0;
}

a.active:after,
a:hover:after {
    border-width: 0 0 15px 15px;
    border-color: transparent transparent crimson transparent;
    bottom: 0;
}

 <ul class="menu-container">
     <li><a href="" class="active">home</a></li>
     <li><a href="">about</a></li>
     <li><a href="">video</a></li>
     <li><a href="">edit</a></li>
     <li><a href="">logout</a></li>
    </ul>