html - 从右到左出现的方框阴影

This question already has answers here:

Hover effect : expand bottom border

(8 个回答)

4年前关闭。

我使用以下代码

.header .menu-item {
  margin: 0 15px;
  list-style: none;
  font: 500 16px Poppins, sans-serif;
  text-transform: lowercase;
  display: inline;
}
.header .menu-item a,
.header .menu-item a:visited {
  display: inline-block;
  width: auto;
  padding: 0 10px;
  line-height: 110%;
  color: #000;
  text-decoration: none;
  -webkit-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,1);
  -moz-box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,1);
  box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,1);
  -webkit-transition: box-shadow ease-in-out 0.2s;
  -moz-transition: box-shadow ease-in-out 0.2s;
  transition: box-shadow ease-in-out 0.2s;
}
.header .menu-item a:hover,
.header .menu-item a:focus{
  color: #000;
  text-decoration: none;
  -webkit-box-shadow: inset 0px -7px 0px 0px rgba(0,0,0,1);
  -moz-box-shadow: inset 0px -7px 0px 0px rgba(0,0,0,1);
  box-shadow: inset 0px -7px 0px 0px rgba(0,0,0,1);
}

<div class="header">
  <ul class="menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Contato</a></li>
  </ul>
</div>

到目前为止，这正是我想要的。除了因为我希望悬停效果从右到左出现。我怎样才能用盒子阴影做到这一点？

按照布局有一个想法。

我正在打破我的头，但还没有得到任何东西

如果您对此有其他解决方案，只要他们不使用图像，我将不胜感激。

非常感谢

最佳答案

可选的。如果您没有找到使用 box-shadow 的解决方案

我之前只是使用了一个伪元素，并在元素中加入了一些效果。

.header .menu-item {
  margin: 0 15px;
  list-style: none;
  font: 500 16px Poppins, sans-serif;
  text-transform: lowercase;
  display: inline;
}
.header .menu-item a,
.header .menu-item a:visited {
  display: inline-block;
  width: auto;
  padding: 0 10px;
  line-height: 110%;
  color: #000;
  text-decoration: none;
  position: relative;
}

.header .menu-item a:before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  height: 7px;
  width: 0px;
  background: black;
  transition: all 0.3s ease-in-out;
}

.header .menu-item a:hover:before {
  width: 100%;
}

<div class="header">
  <ul class="menu">
    <li class="menu-item"><a href="#">Home</a></li>
    <li class="menu-item"><a href="#">Contato</a></li>
  </ul>
</div>

希望对你有帮助。干杯:)

关于html - 从右到左出现的方框阴影，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40209915/

上一篇：javascript - 切换播放/暂停图像按钮 HTML5 视频

下一篇：html - 如何更改 <button> 元素的字体系列？

相关文章：

javascript - 可编辑元素占位符不平滑

javascript - 从 Summernote 中删除 Arial 和 Helvetica 字体

html - 加粗链接怎么写才对？

javascript - html中的电话号码输入字段

html - 使用媒体查询显示和隐藏

javascript - css 中的圆 Angular 菜单项，无需 CSS3!

javascript - 通过避免代码重复附加 HTML block "more times"

css - 购物车中的 Woocommerce 风格产品

html - 页面底部的空白

javascript - 如何切换链接(不是按钮)以显示和隐藏文本