Question

我在下面有2个示例，它们显示4个链接，并在它们上方悬停显示边框底部，效果很轻松。

在示例1中，从上到下显示边框底部。我尝试过使用示例2中的padding属性，它在浏览器中不一致，但它无法正常工作。

示例1：转换默认功能（从上到下转换）

  <!DOCTYPE html><html class=''>
  <head>

  <style class="cp-pen-styles">
  body {
    padding: 50px;
  }

  a, a:hover {
    text-decoration: none;
  }

  li {
    position: relative;
    padding-bottom: 3px;
    margin-right: 10px;
    display: inline;
  }

  li a {
    border-bottom: 0em solid transperant;
    color: #777;
  }

  li:focus > a,
  li:hover > a,
  li:active > a {
      border-bottom: 0.313em solid #206E9F;
      transition: border-bottom .2s ease-in-out;
      -webkit-transition: border-bottom .2s ease-in-out;
      -moz-transition: border-bottom .2s ease-in-out;
      -ms-transition: border-bottom .2s ease-in-out;
  }
|
</style>
</head>
<body>


  <ul>
    <li><a href="#home">HOME</a></li>
    <li><a href="#page">PAGE</a></li>
    <li><a href="#about">ABOUT US</a></li>
    <li><a href="#contact-me">CONTACT US</a></li>
  </ul>


  </body>
  </html>

示例2：从底部过渡（使用填充 - 与IE浏览器的兼容性问题）

<!DOCTYPE html><html class=''>

<head>

<style class="cp-pen-styles">
body {
  padding: 50px;
}

a, a:hover {
  text-decoration: none;
}

li {
    position: relative;
    padding-bottom: 3px;
    margin-right: 10px;
    display: inline;
}

li a {
    color: #777;
    padding-bottom:0.4em;
    border-bottom: 0em solid transperant;
}

li:focus > a,
li:hover > a,
li:active > a {
    padding-bottom:0em;
    border-bottom: 0.313em solid #206E9F;
    transition: all .2s ease-in;
    -webkit-transition: all .2s ease-in;
    -moz-transition: all .2s ease-in;
    -ms-transition: all .2s ease-in;
}

</style></head><body>


<ul>
  <li><a href="#home">HOME</a></li>
  <li><a href="#page">PAGE</a></li>
  <li><a href="#about">ABOUT US</a></li>
  <li><a href="#contact-me">CONTACT US</a></li>
</ul>


</body></html>

如何使CSS3过渡适用于从下到上开始的border-bottom属性。

Answer 1

您可以使用伪元素和变换而不是边框来执行此操作。

＆＃13;

  body {
    padding: 50px;
  }
  a,
  a:hover {
    text-decoration: none;
  }
  li {
    position: relative;
    padding-bottom: 3px;
    margin-right: 10px;
    display: inline;
  }
  li a {
    border-bottom: 0em solid transperant;
    color: #777;
    position: relative;
  }
  li > a::after,
  li > a::after,
  li > a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: .313em;
    background: #206E9F;
    top: 100%;
    left: 0;
    transform-origin: center bottom;
    transform: scaleY(0);
    transition: transform .2s ease-in-out;
  }
  li:focus > a::after,
  li:hover > a::after,
  li:active > a::after {
    transform: scaleY(1);
  }

＆＃13;

<ul>
  <li><a href="#home">HOME</a>
  </li>
  <li><a href="#page">PAGE</a>
  </li>
  <li><a href="#about">ABOUT US</a>
  </li>
  <li><a href="#contact-me">CONTACT US</a>
  </li>
</ul>

＆＃13;

Answer 2

您可以使用:after或:before伪元素来模拟您想要的结果。通过这种方式，您可以更好地控制所需的效果（例如添加各种变换）。

body {
  padding: 50px;
}

a {
  text-decoration: none;
}

li {
  display: inline;
  margin-right: 10px;
}

li a {
  border-bottom: 0 solid transparent;
  color: #777;
  display: inline-block;

  padding-bottom: 3px;
  position: relative;
}

li a > .fancy-line {
  background-color: transparent;
  content: "";
  display: block;
  height: 0;

  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  -o-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
  -moz-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, height 0.2s ease-in-out;
}

li a:hover > .fancy-line {
  background-color: #206E9F;
  height: 3px;
}

<ul>
    <li><a href="#home">HOME <span class="fancy-line"></span></a></li>
    <li><a href="#page">PAGE <span class="fancy-line"></span></a></li>
    <li><a href="#about">ABOUT US <span class="fancy-line"></span></a></li>
    <li><a href="#contact-me">CONTACT US <span class="fancy-line"></span></a></li>
</ul>

如何使CSS3过渡适用于从下到上开始的border-bottom属性

2 个答案: