将鼠标悬停在链接上时，如何获取EpicGame的导航栏过渡？

Question

将鼠标悬停在上方时，说出“新闻”，就会弹出蓝色下划线。从我所看到的，它实际上是一个高度从0px-> 5px过渡的背景。但是，我的代码无法复制它。

* {
  padding: 0;
  margin: 0;
}

.navbar {
  padding: 28px 36px;
  background: black;
}

.navbar ul {
  list-style: none;
}

.navbar li {
  padding: 0 8px;
  height: 100%;
  position: relative;
  transform: translateZ(0);
}

.navbar li::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: blue;
  transition: height .2s ease-in-out;
}

a {
  display: block;
  text-decoration: none;
  color: white;
}

<div class="navbar">
  <ul>
    <li><a href="#">Home</a>
  </ul>
</div>

我在这里肯定缺少明显的东西，但是我不明白。帮助吗？

Answer 1

如果我做对了，您会完成大部分工作，但是在使用::before之类的伪元素时，请务必牢记，您必须声明add_action('woocommerce_checkout_create_order_line_item', 'add_custom_hiden_order_item_meta_data', 20, 4 ); function add_custom_hiden_order_item_meta_data( $item, $cart_item_key, $values, $order ) { // Set user meta custom field as order item meta if( $meta_value = get_user_meta( $order->get_user_id(), 'billing_enumber', true ) ) $item->update_meta_data( 'pa_billing-e-number', $meta_value ); } 属性< / strong>，否则根本无法使用。然后，要进行这项工作，您应该只关心进行过渡，方法是在content上放置初始with和height，然后将height元素悬停到实际位置。

因此您的最终代码应如下所示：

::before

* {
  padding: 0;
  margin: 0;
}

.navbar {
  padding: 28px 36px;
  background: black;
}

.navbar ul {
  list-style: none;
}

.navbar li {
  padding: 0 8px;
  height: 100%;
  position: relative;
  transform: translateZ(0);
}

.navbar li::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: 50px;
  height: 0;
  background: blue;
  transition: height .2s ease-in-out;
}

.navbar li:hover::before {
  height: 5px;
}

a {
  display: block;
  text-decoration: none;
  color: white;
}