CSS：风格之前

Question

我希望在菜单元素的hover状态下实现类似的功能：

我无法用以下方法实现：出于某些原因，在边境财产之后，可能缺乏知识。

Here你可以看到我到目前为止所拥有的东西。 正如您所看到的，我的:before选择器与a标签不完全对齐，而且我没有好的等腰三角形。你觉得背景图片会更容易吗？

Answer 1

您可以使用问题中所述的:before选择器，并将其与绝对定位混合使用，即可获得所需的效果。

这显然需要更多的清理才能达到你的喜好，但这是一个很好的一般起点。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我希望这可以帮到你

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>