html - 将标题悬停在一行中

Question

我对我为网站构建的内容有疑问。

上面是我在我的网页登陆页面上突出显示标题的 gif。如您所见，该行比文本延伸得更远。我想我知道为什么要这样做，因为我有一排等距地分成三个部分。我已尝试更改代码，但我无法让它越过这些行。

        <div class="icons">
            <div class="col-sm-4">
                <a class="img-responsive animated bounceInUp" href=""><p class="effect-underline" style="font-family: Ubuntu; font-size: 60px;">About Me</p></a>
            </div>
            <div class="col-sm-4">
                <a class="img-responsive animated bounceInUp" href=""><p class="effect-underline" style="font-family: Ubuntu; font-size: 60px;">My Projects</p></a>
            </div>
            <div class="col-sm-4">
                <a class="img-responsive animated bounceInUp" href=""><p class="effect-underline" style="font-family: Ubuntu; font-size: 60px;">Contact Me</p></a>
            </div>
        </div>

上面是我用来显示三列的代码，将其分开并等间距和对齐文本。有什么可能的方法可以防止下划线功能超出文本范围，同时保持此列结构？

这是与 :hover 关联的 CSS。

     p.effect-underline:after {
     content: '';
     position: absolute;
     left: 0;
     display: inline-block;
     height: 1em;
     width: 100%;
     border-bottom: 2px solid;
     margin-top: 10px;
     opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
    }

    p.effect-underline:hover:after {
      opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

Answer 1

你需要将你的p设置为display:inline-block，因为你在伪元素中设置了position: absolute ::after 你需要在 p

中设置 position: relative

避免使用内联样式，尝试使用 CSS 样式。

p::after {
  content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 2px solid;
  margin-top: 10px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
}
p:hover::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
p {
  display: inline-block;
  position: relative;
  font-family: Ubuntu;
  font-size: 60px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row icons">
    <div class="col-sm-4">
      <a class="img-responsive animated bounceInUp" href="">
        <p class="effect-underline" style="">About Me</p>
      </a>
    </div>
    <div class="col-sm-4">
      <a class="img-responsive animated bounceInUp" href="">
        <p class="effect-underline">My Projects</p>
      </a>
    </div>
    <div class="col-sm-4">
      <a class="img-responsive animated bounceInUp" href="">
        <p class="effect-underline">Contact Me</p>
      </a>
    </div>
  </div>
</div>