CSS: перед тем стилем

Question

Я хочу, чтобы достичь чего-то вроде этого на hover состояния элемента меню:

Я не могу достичь его: после границы собственности по каким-то причинам, возможно отсутствие знаний.

Here вы можете видеть, что у меня есть. Как видите, селектор :before не совсем выровнен с тегом a, и у меня нет хорошего равнобедренного треугольника. Считаете ли вы, что было бы проще с фоновым изображением?

Answer 1

Я надеюсь, что это может помочь вам

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>

Answer 2

Вы можете использовать селектор :before, как вы заявили в своем вопросе, и смешать его с некоторым абсолютным позиционированием, и вы получите необходимый вам эффект.

Это, очевидно, потребуется немного больше, чтобы очистить, чтобы получить его по своему вкусу, но это хорошая общая отправная точка.

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>