通过构建简单的东西来学习 CSS 伪元素 - 第 1 部分：按钮和链接悬停效果。

大家好！希望你们一切顺利。问题是，我仍然对 CSS 伪元素感到困惑。我不明白它们是如何工作的，以及在哪里以及如何使用它们。所以我决定逐一学习它们，并写下我的学习成果。在本系列文章中，我将使用 CSS 伪元素构建一些简单的内容，以便更好地理解它们。这是本系列的第一部分，在本文中，我们将使用伪元素构建按钮和链接的悬停::before效果::after。

1.按钮悬停效果。

让我们从 HTML 开始。

<button class="cta-1">
   <span>Button Hover</span>
</button>

这里我们有一个button带有类的cta-1。按钮内部有一个span带有按钮文本的。

现在让我们添加 CSS 重置。

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
    font-family: 'Roboto', sans-serif;
}

这是我们需要从元素中删除一些默认样式的基本 CSS。

此后，让我们添加按钮的基本样式。


.cta-1 {
    position: relative;
    padding: 12px 24px;
    border: none;
    font-size: 1.6rem;
    background-color: #E0E7FF;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.cta-1:active, .cta-1:focus{
    outline: none;
}

.cta-1 span{
    position: relative;
    color: #4F46E5;
    transition: all 0.6s ease;
}

这里我们同时在按钮和 span 上设置了，以便稍后在伪元素上position: relative设置。用于悬停效果。所有其他样式均为基本样式。position: absolute::beforetransition

完成这些样式后，我们的按钮将如下所示

伪元素。

对于悬停效果，我们基本上会::before为我们的button
然后我们将向伪元素添加height、width和position: absolute top: 0 left: 0，使其位于span和之间button。
之后我们将添加transform: scaleX(0) transform-origin: 100%（下一步将详细介绍）

那么，让我们添加这个 CSS

.cta-1::before {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: #4F46E5;
    transform: scaleX(0);
    transform-origin: 100%;
    transition: transform 0.6s ease;
}

悬停效果

为了实现悬停效果，我们只需缩放::before悬停效果的伪元素并改变color我们的span（即按钮文本）。

.cta-1:hover::before  {
    transform-origin: 0;
    transform: scaleX(1);
}

.cta-1:hover span{
    color: #E0E7FF;
}

最终结果：

提示！：您可以使用该transform-origin属性来尝试获得不同的悬停效果。

2.链接悬停效果。

对于链接来说，基本相同。让我们从基本的 HTML 和 CSS 开始。

<a href="#" class="link-1">Link Hover</a>

.link-1 {
    position: relative;
    color: #475569;
    font-size: 1.8rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

现在我们将添加::after链接的伪元素，并通过设置将其定位在我们的link下方position: absolute，bottom: 0left:0
然后我们将把height和添加background-color到我们的::after伪元素中，以便我们可以看到它。
最后，我们将在其上添加transform: scaleX(0)和，transform-origin: bottom left以便它默认保持隐藏状态。

  .link-1::after {
    content: '';
    width: 100%;
    position: absolute;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #4F46E5;
    transform: scaleX(0);
    transform-origin: bottom left;
    transition: all 0.3s ease;
  }

现在我们只需缩放 speudo 元素并在悬停时更改链接的颜色即可查看悬停效果。

  .link-1:hover{
      color: #4F46E5;
  }

  .link-1:hover::after {
    transform: scaleX(1);
  }

提示！：您可以使用该transform-origin属性来尝试获得不同的悬停效果。

最终结果：

这篇小文章就到这里。我从中学到了很多东西。希望你也觉得它有用。非常感谢！😀

文章来源：https://dev.to/devggaurav/learning-about-css-pseudo-elements-by-building-simple-things-part-1-button-and-link-hover-effects-1g08