Question

CSS

.menu { 
    margin-top: 0;
    display: inline-block;
    background:white;
    border-bottom: 2px solid white;
    transition:background-color 0.45s, border-bottom 0.45s;
    padding-top: 17px;
    padding-bottom: 17px;
    padding-right: 80px;
    padding-left: 80px; cursor: pointer;
 }
 .menu:hover{
    background:rgba(255,0,0,0.3);
    border-bottom: 2px solid red;
 }

HTML

 <p align="center" class="menu">Home</p>
 <p align="center" class="menu">Shop</p>
 <p align="center" class="menu">Contact</p>

但我想要这样的边框：Expand bottom border on hover 当光标悬停时，它会从中心扩展但据我所知，我不能使用:after，因为我想要它在＆＃34;按钮＆＃34;的页脚。有解决方案吗？谢谢！

Answer 1

我已修复您的问题。告诉我它是否有效？我以不同的方式使用:after，因此它可以正常工作。您可以这样使用：

.menu { 
  margin-top: 0;
  display: inline-block;
  background:white;
  border-bottom: 2px solid white;
  transition:background-color 0.45s, border-bottom 0.45s;
  padding-top: 17px;
  padding-bottom: 17px;
  padding-right: 80px;
  padding-left: 80px;
  cursor: pointer;
  position: relative;
}
.menu:hover {
  background:rgba(255,0,0,0.3);
}
.menu:after {
  display:block;
  content: ' ';
  border-bottom: solid 3px #019fb6;  
  transform: scaleX(0.0001);  
  transition: transform 250ms ease-in-out;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.menu:hover:after {
  transform: scaleX(1);
}

<p align="center" class="menu">Home</p>
<p align="center" class="menu">Shop</p>
<p align="center" class="menu">Contact</p>

使用css展开border-bottom而不：

1 个答案: