CSS：样式之前[重复]

Question

我想在菜单元素的hover 状态上实现类似的效果：

由于某些原因，我无法使用 :after 属性来实现它，可能是缺乏知识。

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>