html - 使用不带 :after 的 css 扩展边框底部

Question

我有这个:https://jsfiddle.net/2qw96kvs/4/

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 因为我想在“按钮”的页脚处使用它，有解决方案吗？
谢谢!

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>