CSS :概念化后

Question

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

我知道 :after 是一个 ~~伪-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

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

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

Answer 3

I know that :after is a ~~pseudo-class~~ pseudo-element that places another element after the one preceding the pseudo-element, but I'm having trouble understanding what's going on here.

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

position: relative 和 position: absolute 可以结合使用将伪元素的位置锚定到 <a> 元素的底部，并且
伪元素的宽度可以在悬停时转换为 100%，因为此百分比基于 <a> 元素的宽度，因为它是伪元素的宽度containing block.

CSS :概念化后

CSS :after conceptualization

css

hover

css-animations

pseudo-element