Question

我有codepen这个:after在<a>元素上使用:after来创建漂亮的悬停效果。我分叉了一个不同的编码器，以便我可以将其分解为可管理，可理解的部分，但我仍然不完全确定如何使用:after来创建效果。

我知道<div class="wrapper"> <a class="underline animate">Hover me</a> </div>是一个伪类伪元素，它将另一个元素放在伪元素之前的元素之后，但是我无法理解这里发生了什么

有人可以帮我理解这是如何运作的吗？这是相关的HTML和CSS：

HTML：

body {
  background-color: #334D5C;
  cursor: pointer;
  font-size: 62.5%;
}

.wrapper {
  margin-top: 70px;
  text-align: center;
}

// basic styles for <a>
a.underline {
  font-size: 5rem;
  color: #E27A3F;
  position: relative;
}

// hover style for text only
a,a:visited,a:hover,a:active{
  transition:0.5s color ease;
  text-decoration:none;
  color: #45B29D;
  position: relative;
}

a.underline:after {
  left: 0;
}

// Animation styling
a.animate:after{
  bottom: 0em;
  height:5px;
  height:0.35rem;
  width:0;
  background-color: #45B29D;
  content: "";
  transition:0.5s width ease;
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  position:absolute;
}

a.animate:hover:after{
  width:100%;
}

CSS：

@import url(http://fonts.googleapis.com/css?family=Slabo+27px);
 body {
  background-color: #334D5C;
  cursor: pointer;
  font-size: 62.5%;
}
.wrapper {
  margin-top: 70px;
  text-align: center;
}
a.underline {
  font-size: 5rem;
  font-family: 'Slabo 27px';
  color: #E27A3F;
  position: relative;
}
a,
a:visited,
a:hover,
a:active {
  transition: 0.5s color ease;
  text-decoration: none;
  color: #45B29D;
  position: relative;
}
a.underline:after {
  left: 0;
}
a.animate:after {
  bottom: 0em;
  height: 5px;
  height: 0.35rem;
  width: 0;
  background-color: #45B29D;
  content: "";
  transition: 0.5s width ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
}
a.animate:hover:after {
  width: 100%;
}
/*
a.underline:after {
  left:50%;
  -webkit-transform:translateX(-50%);
          transform:translateX(-50%);
}
*/

<div class="wrapper">
  <a class="underline animate">Hover me</a>
</div>

{{1}}

Answer 1

after基本上是添加下划线的东西。它只是在单词的底部添加一个元素并将其宽度设置为0.当您将其悬停时，其宽度将变为100％。它也有一个过渡，所以你看它动画。在这里它被简化为骨头：

.element {
    position: relative;
  display: inline-block;
  padding-bottom: 7px;
}

.element::after {
content: "";
  width: 0;
  height: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: orange;
  -webkit-transition: width 250ms ease-in-out;
  -moz-transition: width 250ms ease-in-out;
  -o-transition: width 250ms ease-in-out;
  transition: width 250ms ease-in-out;
}

.element:hover::after {
width: 100%;
}

<div class="element">
  Something
</div>

Answer 2

我知道:after是一个伪类伪元素，它将另一个元素放在伪元素之前的元素之后，但是我很难理解＆＃ 39; s继续在这里。

实际上，:after伪元素是作为原始元素的（最后一个）子元素生成的，而不是作为后续兄弟元素生成的。换句话说，它生成after the content of the originating element，而不是生成元素本身。这可以解释原因

position: relative和position: absolute能够协同工作，将伪元素的位置锚定到<a>元素的底部，并且
在悬停时，伪元素的宽度可以转换为100％，因为此百分比基于<a>元素的宽度，因为它是伪元素＆＃39; s containing block

Answer 3

实际上主要文本有一个基本的变化：悬停时的颜色变化，动画为0.5秒。

：after元素是一种内容为“”（空）里面的空元素。代码告诉使元素不可见的位置（绝对值和底部：0），高度（height: 0.35rem;），background-color: #45B29D;和width : 0%;。在a上悬停时，width:100%会再次设置动画，因此您会看到下划线消费

CSS：概念化之后

3 个答案: