expand border-bottom using css without :after

Question

I have this: 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>

But i want a border-bottom like this: Expand bottom border on hover.
That expands from the center when the cursor is hover.
But as far as i know i can't use :after because i want it at the footer of the "button" is there a solution?
Thank you!

I have fixed your issue. Tell me if it works? I have used `:after` in a different way, so that it works. — Praveen Kumar Purushothaman, Jan 31 '16 at 21:39

score 1 · Accepted Answer · answered Jan 31 '16 at 21:37

I have fixed your issue. Tell me if it works? I have used :after in a different way, so that it works. You can use like this:

.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>

expand border-bottom using css without :after

1 Answers1