Question

尝试在之前的帮助下显示导航锚点底部的线条，之后我尝试了很多解决我的问题，但没有解决这个问题的任何解决方案。我想在css转换的帮助下添加底线，并在pasudo类之后使用转换

<html>
    <head>
        <style>
        body,ul,li,a,nav{
    margin: 0;
    padding: 0;
}

nav {
    background-color: #dadada;
}

.menu-items {
    list-style: none;
    text-align: center;
}

.menu-items a {
    float: left;
    text-decoration: none;
    padding:10px 10px;
    color: #fff;
}
.header-menu  li > a::after {
        border-color: red;
        border-style: solid;
        position: absolute;
    top: 20%;
    left: 0;
    width: 50%;
    height: 0px;
    /*background: rgba(0,0,0,0.1);*/
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: opacity 0.3s, -moz-transform 0.3s;
    transition: opacity 0.3s, transform 0.3s;
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    transform: translateY(20px);

}
.header-menu li > a:hover::after {
    opacity: 1;
    -webkit-transform: translateY(1px);
    -moz-transform: translateY(1px);
    transform: translateY(1px);
}


.menu-items li {
    display: inline-block;
}
    </style>
    </head>
    <body>
        <nav class="header-menu">
            <ul class="menu-items">
                <li><a href="#">Home</a></li>
                <li><a href="#">Animal</a></li>
                <li><a href="#">Birds</a></li>
                <li><a href="#">Sports</a></li>
                <li><a href="#">Address</a></li>
                <li><a href="#">News</a></li>
            </ul>
        </nav>
    </body>
</html>

Answer 1

将position: relative添加到.header-menu li > a或.menu-items a

<强>相对此关键字列出所有元素，就像元素未定位一样，然后调整元素的位置，而不更改布局（从而为元素留下一个空隙一直没有定位）。位置的影响：相对于 table - -group，table-row，table-column，table-cell和table-caption 元素未定义。

然后将top: 50%;中的.header-menu li > a::after更改为top: 100%;

现场演示

＆＃13;

body,
ul,
li,
a,
nav {
  margin: 0;
  padding: 0;
}
nav {
  background-color: #dadada;
}
.menu-items {
  list-style: none;
  text-align: center;
}
.menu-items a {
  float: left;
  text-decoration: none;
  padding: 10px 10px;
  color: #fff;
  position: relative/*this will wrap pseudo elements*/
}
.header-menu li > a::after {
  border-color: red;
  border-style: solid;
  position: absolute;
  top: 100%; /*because we want it to be at the bottom of the anchor*/
  left: 10px; /*10px because anchor has a padding of 10px*/
  width: 50%;
  height: 0px;
  /*background: rgba(0,0,0,0.1);*/
  content: '';
  opacity: 0;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  transform: translateY(20px);
}
.header-menu li > a:hover::after {
  opacity: 1;
  -webkit-transform: translateY(1px);
  -moz-transform: translateY(1px);
  transform: translateY(1px);
}
.menu-items li {
  display: inline-block;
}

＆＃13;

<nav class="header-menu">
  <ul class="menu-items">
    <li><a href="#">Home</a>
    </li>
    <li><a href="#">Animal</a>
    </li>
    <li><a href="#">Birds</a>
    </li>
    <li><a href="#">Sports</a>
    </li>
    <li><a href="#">Address</a>
    </li>
    <li><a href="#">News</a>
    </li>
  </ul>
</nav>

＆＃13;

使用css中的伪类后，在锚点中添加底线

1 个答案: