Question

我有一个侧面导航我正在构建，它需要完全键盘可访问，并且链接本身嵌套在列表项中。其他一切都很好，但是我被要求制作一个悬停动画，这是一个动画伪元素。

我完成了大部分工作，是导航和动画的结构。但是，animated :: before元素似乎总是显示在列表项的顶部，并且会按照我设置的任何高度向下推动锚点。我已经尝试了两种身高：继承和100％的内容之前，但是这不起作用。

理想的行为是内容将从底部到顶部与锚点一致地设置动画，并且仅使用指定的宽度占据li元素的高度（100％）。

注意：我不能使用list-style：none，因为屏幕阅读器无法识别列表中有多少项。

编辑：取出按钮元素。只关注菜单。

这是CodePen：https://codepen.io/anon/pen/EZbLMY

随意分叉。

HTML：

<div id="mySidenav" class="sidenav" aria-label="Menu" aria-hidden="true">
    <nav>   
        <ul role="navigation">
          <li id="about"><a href="#">About</a></li> 
          <li id="services"><a href="#">Services</a></li>
          <li id="clients"><a href="#">Clients</a></li>
          <li id="contact"><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

CSS：

/* The side navigation menu */
.sidenav {
    height: 100%; 
    width: 250px;
    position: absolute; 
    z-index: 2; 
    top: 0;
    background-color: #fff; 
    overflow-x: hidden; 
    padding-top: 60px; 
}

.showOverlay{
    display: block !important;
}

/* The navigation menu links */
.sidenav a{
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #000;
    display: block;
    width: inherit; 
}

/*Clean up space between elements*/
.sidenav nav ul{
    padding: 0;
    margin: 0;
}

.sidenav nav ul li::before{
    content:"";
    width: 4px;
    height: 0px;
    display: block;
    background-color: #000000;
}

.sidenav nav ul li:hover::before{
    height: 20px;
    transition: 0.3s ease-out;
    padding-left: 2px;
}

Answer 1

将::before元素的位置更改为absolute。另外，为了整齐排列，请在li元素中添加position:relative。

<div id="mySidenav" class="sidenav" aria-label="Menu" aria-hidden="true">
    <nav>   
        <ul role="navigation">
          <li id="about"><a href="#">About</a></li> 
          <li id="services"><a href="#">Services</a></li>
          <li id="clients"><a href="#">Clients</a></li>
          <li id="contact"><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

/* The side navigation menu */
.sidenav {
    height: 100%; 
    width: 250px;
    position: absolute; 
    z-index: 2; 
    top: 0;
    background-color: #fff; 
    overflow-x: hidden; 
    padding-top: 60px; 
}

.showOverlay{
    display: block !important;
}

/* The navigation menu links */
.sidenav a{
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #000;
    display: block;
    width: inherit; 
}

/*Clean up space between elements*/
.sidenav nav ul{
    padding: 0;
    margin: 0;
}
/*Make li elements relative, so that the before elements are positioned correctly*/
.sidenav nav ul li{
  position:relative;
}
.sidenav nav ul li::before{
    content:"";
    width: 4px;
    height: 0px;
    display: block;
    background-color: #000000;
    /*Add absolute positioning*/
    position:absolute;
    top:8px;
}

.sidenav nav ul li:hover::before{
    height: 20px;
    transition: 0.3s ease-out;
    padding-left: 2px;
}

Align :: before伪元素与列表项内容

1 个答案: