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，您需要在position: relative中设置p {1}}

避免使用内联样式，而是在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>

将标题悬停在一行内

1 个答案: