Question

所以我要这样做，以便在导航栏中将鼠标悬停在链接上时，一条线从左下角到右上角，但是当我使该条线从右到右时，链接会改变大小和其他怪异的东西我解决了吗？

* {
  margin : 0;
  padding: 0;
}

nav{
background-color: black;
width: 1200px;
height: 110px;
position: relative;
z-index: 10;
}

ul{
  left: 0;
}

.nav{
  position: relative;
}

.navlink{
  margin-right: 14px;
}

.navlink1{
  margin-right: 14px;
  margin-left: 14px;
}

.navlink4{
margin-right: 0;
}

.navlink::before{
  content: '';
  display: block;
  width: 0;
  height: 5px;
  background:darkred;
  transition: width .5s;
  float: right;
}

.navlink:hover::before{
  width: 100%;
  transition: width .5s;
}

.navlink::after{
  content: '';
  display: block;
  width: 0;
  height: 5px;
  background:darkred;
  transition: width .5s;
}

.navlink:hover::after{
  width: 100%;
  transition: width .5s;
}

.navlink1::before{
  content: '';
  display: block;
  width: 0;
  height: 5px;
  background:darkred;
  transition: width .5s;
}
 
li{
display: inline-block;
}

li a{
  display: inline-block;
	background-color: #FFDA45;
	border: black solid 1px;
	color: white;
	text-decoration: none;
	padding: 20px;
	width: 235px;
	margin-top: 11px;
	margin-bottom: 11px;
	text-align: center;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 200%;
}

<nav>
    
	<ul class="nav">
	  <li><a class="navlink" href="index.html">Home</a></li>
	  <li><a class="navlink" href="TLOU part II.html">TLOU part II</a></li>
	  <li><a class="navlink" href="Video's.html">Video's</a></li>
	  <li><a class="navlink" href="Music.html">Music</a></li>
	</ul>
	
</nav>

所以我用了float：right;由于某些原因使before元素从右侧出现，这会导致链接的行为异常。

这是没有浮点数的工作方式：对；

    * {
      margin : 0;
      padding: 0;
    }

    nav{
    background-color: black;
    width: 1200px;
    height: 110px;
    position: relative;
    z-index: 10;
    }

    ul{
      left: 0;
    }

    .nav{
      position: relative;
    }

    .navlink{
      margin-right: 14px;
    }

    .navlink1{
      margin-right: 14px;
      margin-left: 14px;
    }

    .navlink4{
    margin-right: 0;
    }

    .navlink::before{
      content: '';
      display: block;
      width: 0;
      height: 5px;
      background:darkred;
      transition: width .5s;
    }

    .navlink:hover::before{
      width: 100%;
      transition: width .5s;
    }

    .navlink::after{
      content: '';
      display: block;
      width: 0;
      height: 5px;
      background:darkred;
      transition: width .5s;
    }

    .navlink:hover::after{
      width: 100%;
      transition: width .5s;
    }

    .navlink1::before{
      content: '';
      display: block;
      width: 0;
      height: 5px;
      background:darkred;
      transition: width .5s;
    }
     
    li{
    display: inline-block;
    }

    li a{
      display: inline-block;
    	background-color: #FFDA45;
    	border: black solid 1px;
    	color: white;
    	text-decoration: none;
    	padding: 20px;
    	width: 235px;
    	margin-top: 11px;
    	margin-bottom: 11px;
    	text-align: center;
    	font-family: Georgia, "Times New Roman", Times, serif;
    	font-size: 200%;
    }

    <nav>
        
    	<ul class="nav">
    	  <li><a class="navlink" href="index.html">Home</a></li>
    	  <li><a class="navlink" href="TLOU part II.html">TLOU part II</a></li>
    	  <li><a class="navlink" href="Video's.html">Video's</a></li>
    	  <li><a class="navlink" href="Music.html">Music</a></li>
    	</ul>
    	
    </nav>

所以我希望它看起来像这样，但最上面的一个来自右侧。

Answer 1

您可以轻松地在后台执行此操作。只需根据需要调整位置和大小即可：

li a {
  background: 
    linear-gradient(darkred,darkred) bottom 5px left  5px,
    linear-gradient(darkred,darkred) top    5px right 5px,
    #FFDA45;
  background-size:0% 8px; /* width:0 height:8px */
  background-repeat:no-repeat;
  transition:0.5s;
}
li a:hover {
  /* full width minus 5px from left and right */
  background-size:calc(100% - 10px) 8px;
}

完整代码：

* {
  margin: 0;
  padding: 0;
}

nav {
  background-color: black;
  width: 1200px;
  height: 110px;
  position: relative;
  z-index: 10;
}

ul {
  left: 0;
}
.nav {
  position: relative;
}

.navlink {
  margin-right: 14px;
}


li {
  display: inline-block;
}

li a {
  display: inline-block;
  background: 
    linear-gradient(darkred,darkred) bottom 5px left  5px,
    linear-gradient(darkred,darkred) top    5px right 5px,
    #FFDA45;
  background-size:0% 8px;
  background-repeat:no-repeat;
  transition:0.5s;
  border: black solid 1px;
  color: white;
  text-decoration: none;
  padding: 20px;
  width: 235px;
  margin-top: 11px;
  margin-bottom: 11px;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 200%;
}
li a:hover {
  background-size:calc(100% - 10px) 8px;
}

<nav>

  <ul class="nav">
    <li><a class="navlink" href="index.html">Home</a></li>
    <li><a class="navlink" href="TLOU part II.html">TLOU part II</a></li>
    <li><a class="navlink" href="Video's.html">Video's</a></li>
    <li><a class="navlink" href="Music.html">Music</a></li>
  </ul>

</nav>

从右侧使CSS过渡流时出现奇怪的行为

1 个答案: