CSS：概念化之后

Question

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

我知道 :after 是一个 pseudo-class 伪元素，它在伪元素之前的元素之后放置另一个元素，但我无法理解这里发生了什么。

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

HTML：

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

CSS：

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%;
}

@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>

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 是一个 pseudo-class 伪元素，它在伪元素之前的元素之后放置另一个元素，但我无法理解这里发生了什么。

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

1. position: relative 和 position: absolute 能够协同工作，将伪元素的位置锚定到 <a> 元素的底部，并且

2. 悬停时伪元素的宽度可以转换为 100%，因为此百分比基于 <a> 元素的宽度，因为它是伪元素的 containing block。

Answer 3

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

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