Question

我正在尝试制作一个下划线，该下划线的长度是单词长度的50％，并且位于被徘徊的单词下方。

尽管选择了nav，但伪选择器中的宽度取a的宽度而不是a的宽度。

设置left属性时，nav的左侧是静态，而不是a的左侧。我需要它相对于正在盘旋的物品。

以下是相关代码：

nav a:hover::before{
    position: absolute;
    left: calc(50% - 10%);
    bottom: 0;
    width: 20%;
    height: 1px;
    background: #7b0700;
    content: "";
}

和CodePen

http://codepen.io/WallyNally/pen/dXxrgj

有什么建议吗？谢谢。

Answer 1

你快到了！

缺少部分：

nav a {
  position: relative;
}

如果没有这个，那么这个行会在DOM中的某个元素上定位（位置绝对，相对，固定，或者如果缺少正文）。

对于50％的宽度，我会这样做：

nav a:hover::before {
  position: absolute;
  bottom: 0;
  height: 1px;
  background: #7b0700;
  content: "";

  /* instead of width: */
  left: 25%;
  right: 25%;

}

从代码中分叉：http://codepen.io/anon/pen/BzXKrB

自定义下划线以适合内容的宽度

1 个答案: