1

I have this menu that I want to try some new animation with on the hover state. The problem is that the width transition doesn't seem to work in Firefox, but in Chrome, Safari and IE. I've tried with both Bourbon mixin and without, no help. Is Firefox not capable of having CSS transitions on pseudo elements or what could cause the problem?

Codepen

http://codepen.io/stroperik/pen/ByJjmR

HTML

<ul>
  <li><span>Hem</span></li>
  <li><span>Tjänster</span></li>
</ul>

SCSS

ul {
  list-style-type: none;
}

li {
  display: inline-block;
  cursor: pointer;
  margin: 0 10px;
}

span {
  text-transform: uppercase;
  font-family: 'Arial';
  font-size: 48px;
  font-weight: bold;
}

span::after {
  display: block;
  content: '';
  width: 2px;
  height: 5px;
  background: red;
  @include transition(width 0.2s ease);
}

span:hover::after {
  width: 100%;
}

Thanks in advance

Erik Blomqvist
  • 471
  • 1
  • 4
  • 16

1 Answers1

1

Looks like Firefox quirk (?), but apparently it needs pseudo-element :after to be positioned in this case:

span {
  text-transform: uppercase;
  font-family: 'Arial';
  font-size: 48px;
  font-weight: bold;
  position: relative;
}
span:after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  content: '';
  width: 2px;
  height: 5px;
  background: red;
  @include transition(width 0.2s ease);
}

I will also add that setting a "border" like this would ideally anyway require positioning of :after relatively to its parent span because it allows setting necessary offset easy.

Demo: http://codepen.io/anon/pen/yypeEx

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • Thanks for the really quick and useful response! I'll see if I have the time later today to read more about this and report to the Moz team. – Erik Blomqvist Feb 10 '15 at 09:55