CSS的伪元素::before和::after

起因

之所以认识到::before和::after,是因为在分析其他网页代码是经常看到这两个东西。直到有一次我在https://elementary.io上看见一个超链接效果,如下图所示:
http://lenconda.top/images/17110201.gif

分析

  1. 随后我对这个链接进行了分析,发现在这个链接的<a></a>中只有“安全细则”四个字,并没有类似于大于号(">")的字符;

  2. 然后考虑到开发者是否为超链接设置了CSS样式,于是我发现这个超链接被设置了一个名为read-more的CSS样式,在Chrome中找到这个样式的代码如下:
    http://lenconda.top/images/17110202.png
    ::after是个什么东西?以前似乎从来没有遇见过,但是经过查找资料之后对于用两个冒号似乎明了了起来:

":before" 伪元素可以在元素的内容前面插入新内容。
":after" 伪元素可以在元素的内容之后插入新内容。

  1. ::before::after这样的元素在CSS中被称为“伪元素”,这两种伪元素分别用于在应用了某种样式的元素之前和之后插入新的内容。

  2. 就拿这段代码来说,::after伪元素中的content属性值\f105在font-awesome中代表fa-icon-angle-right,也就是右三角(形似“>”),按照引用所说,这个icon将被添加在“安全细则”四个字的右侧,而且还被添加:hover伪类,在read-more中设置过渡效果,最终达到预计的效果。

体会

“安全细则”在鼠标划过时,之所以不会像右尖角那样向右移动,是因为transform属性作用在了伪元素after的hover上,并不是read-more本身,但是伪元素还是会在read-more被划过时执行右移动画,只不过右移的是尖角,而不是本身而已。

附上一段仿写代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .read-more{
            font-size: 13px;
            color: #108fcf;
            text-decoration: none;
        }
        .read-more::after{
            color: inherit;
            content: ">";
            display: inline-block;
            font-style: normal;
            font-weight: inherit;
            padding-left: 6px;
            transition: transform 0.15s ease-in-out;
        }
        .read-more:hover::after{
            transform: translateX(5px);
        }
    </style>
</head>
<body>
    <a class="read-more" href="#">安全细则</a>
</body>
</html>

效果:

http://lenconda.top/images/17110203.gif

将最新的文章发送到你的邮箱

展示评论