Expand bottom border on hover not working?

Question

What I am trying to do and the (some of) code I am using is in the answer to another question, specifically the "expand from centre" answer here . Simply nothing is happening for the describe effect. Any Ideas?

HTML

<ul id="items">
  <li> <span id="menuBtnOff" onclick="menuIn()">&#x2573;</span></li>
  <li> <a href="#about" rel=""> About Me </a> </li>
  <li> <a href="#profile" rel=""> What I can do for you </a> </li>
  <li> <a href="#footer" rel=""> Contact </a> </li>
</ul>

Sass

li:hover
    a
      cursor: pointer
      color: $menuGreen
      transition: all 0.1s ease-in-out

  li, #menuBtnOn
    transition: all 0.1s ease
    text-indent: initial
    resize: none
    float: right
    display: inline-block
    padding: 15px
    line-height: 5px
    font-family: 'Roboto', sans-serif
    font-weight: lighter
    font-size: 14px
    color: black
    &:not(:first-child)
      border-right: 1px solid rgba(37, 37, 37, 0.28)
    a:after
      content: ''
      border-bottom: solid 3px $menuGreen
      transform: scaleX(0)
      transition: transform 250ms ease-in-out
      a:hover:after
        transform: scaleX(1)

My full code is documented here

Answer 1

There were two main problems with your code (other than the syntax errors):

• You weren't setting display: block to the a:after pseudo-element. This is mandatory as it is the one that provides the pseudo-element a height and a width. Without this, the pseudo-element will be 0 x 0px and so you won't be seeing anything.
• The way your Sass code was indented (I assumed you're using Sass syntax and not the SCSS one based on the missing colons, braces and indentations) means that a:hover:after selector is nested under the a:after selector and so the final selector output would be .menuHolder li a:after a:hover:after. This doesn't match any element and so nothing happens on hover.

Other than these two changes, there were 3 places where the indentations were not consistent. That is there were areas where 5/7 spaces were provided instead of the normal 2/4/6/...

The fixed code in Sass syntax would be as follows. A demo with equivalent SCSS syntax is available here. I've used SCSS syntax for the demo because JSFiddle doesn't support Sass syntax.

a:link, a:visited
  text-decoration: none
  color: black

.menu
  white-space: nowrap
  overflow: hidden

.menuHolder
  overflow: hidden
  position: fixed
  display: inline-block
  top: 0
  right: 0
  width: 110%
  padding: 6px 0 0
  background-color: rgba(70, 106, 135, 0.65)
  text-align: right
  transition: all 1s ease-in-out
  max-height: 37px
  z-index: 10

  ul
    margin: 0
    padding: 0

  li:hover
    a
      cursor: pointer
      color: $menuGreen
      transition: all 0.1s ease-in-out

  li, #menuBtnOn
    transition: all 0.1s ease
    text-indent: initial
    resize: none
    float: right
    display: inline-block
    padding: 15px
    line-height: 5px
    font-family: "Roboto", sans-serif
    font-weight: lighter
    font-size: 14px
    color: black

    &:not(:first-child)
      border-right: 1px solid rgba(37, 37, 37, 0.28)

    a:after
      display: block
      content: ""
      border-bottom: solid 3px $menuGreen
      transform: scaleX(0)
      transition: transform 250ms ease-in-out
      margin-top: 10px

    a:hover:after
      transform: scaleX(1)

  #menuBtnOff,
  #menuBtnOn
    transition: all 0.3s ease
    cursor: pointer
    color: black

    &:hover
      color: $menuGreen

  #menuBtnOn
    font-size: 20px
    float: left

---

One additional improvement that I'd suggest is to put the :hover effect on the li itself (that is, have the selector as .menuHolder li:hover a:after instead of .menuHolder li a:hover:after) because the change of text color happens on the :hover of the li itself and this would make it consistent.

Here is a demo for this version.