html - 试图让下划线相对于 SCSS 中的导航菜单项开始

Question

我正在尝试实现一个菜单导航栏，它在悬停时使用从左到右的下划线动画突出显示菜单项。

目前我的下划线动画是从菜单项的中心到外面。

我已尝试搜索此问题的解决方案，但无法弄清楚我做错了什么。

这是 codepen 上元素的链接 http://codepen.io/anon/pen/JowgqP

HTML

<menu>
  <p><a href="http://factmag.com/tag/kanye-west" target="_blank"><strong>Home</strong></a> 
  <a href="http://factmag.com/tag/jay-z" target="_blank"><strong>About</strong></a>
  <a href="http://factmag.com/tag/g-o-o-d-music" target="_blank"><strong>Portfolio</strong></a> 
    <a href="http://www.factmag.com/2015/02/12/kanye-west-premieres-wolves-featuring-sia-vic-mensa-produced-cashmere-cat-sinjin-hawke/" target="_blank"><strong>Contact</strong></a> <strong>

  <p class="note">This is a recreation of the link hover effect from <a href="http://www.factmag.com/2015/02/13/kanye-west-pusha-t-2-chainz-perform-first-annual-roc-city-classic-watch-full-show/">factmag.com</a></small>
</menu>

CSS

@import url(http://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic);

$link-color: #E71818;
$text-color: black;
$article-font: Noto serif, serif;

menu {
  color: $text-color;
  font-family: $article-font;
  max-width: 30em;
}
p {
  font-size: 18px;
  line-height: 1.5;
}
menu a {
  @extend %fancy-link;
}
.note {
  display: inline-block;
  border-top: 1px solid $link-color;
  color: #777;
  font-size: .8em;
  font-style: italic;
  margin-top: 2em;
  padding-top: 1em;
}
%fancy-link {
  color: $link-color;
  position: relative;
  text-decoration: none;
  transition: all 0.15s ease-out;
  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0px;
    left: 0;
    background: #f00;
    visibility: hidden;
    transform: scaleX(0);
    transition: all 0.3s ease-in-out 0s;
  }
  &:hover {
    transition: all 0.15s ease-out;
    &:before {
        visibility: visible;
        transform: scaleX(1);
    }
  }
}

Answer 1

默认转换点是 center center...或者更确切地说是 50% 50% 以便于引用。 (对于 2 维......我们现在将省略 z 偏移量。)

您必须对此进行修改，使原点现在位于 center left

 &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0px;
    left: 0;
    background: #f00;
    visibility: hidden;
    transform: scaleX(0);
    transform-origin: center left; /* here */
    transition: all 0.3s ease-in-out 0s;
    }

Codepen Demo

Transform-Origin @ MDN