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

I've never written any SCSS, but don't you need braces after the selectors? — sundance, Jan 26 '17 at 06:19
@sundance Sass syntax doesn't need braces. The SCSS syntax does. I think OP is using the former. — Harry, Jan 26 '17 at 06:42

score 1 · Accepted Answer · answered Jan 26 '17 at 07:23

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.

Thank you for your time! I had no idea my indentation was that off, I guess the sass syntax has its downsides with keeping it tidy. +1 for explaining. — Draxy, Jan 26 '17 at 07:56
@Draxy: You're welcome. Happy to help! I always have problems with the Sass syntax too. I wouldn't say it is bad but I'm more used to CSS and so SCSS syntax is more easier for me. I guess Sass syntax would be easy for somebody who works a lot with python, ruby etc. — Harry, Jan 26 '17 at 07:59

Expand bottom border on hover not working?

1 Answers1