使用CSS伪元素为<h1></h1>标签创建超炫效果

一、制作带icon的标题

想要让我们网页上的标题更加吸引眼球，我们可以在标题前面添加一个小图标，这样做显得更有创意和个性化，同时也可以更好地吸引用户的注意力。我们可以通过CSS伪元素来很容易地实现这一点。

h1::before{
    content: url(icon.png);
    margin-right: 10px;
}

代码中content属性的值指定我们想要添加的小图标，同时为了让标题与图标之间留出一定的空隙，我们在代码中添加了一个margin-right属性。

下面是完整的代码示例：

<style>
    h1::before{
        content: url(icon.png);
        margin-right: 10px;
    }
</style>

<h1>This is a demo</h1>

二、实现霓虹字效果

霓虹字是非常常见的一种效果，在传播广告等方面也被广泛使用。我们可以通过CSS伪元素来实现这一效果，具体思路是在文字周围生成多个不同颜色、大小、透明度的光晕效果，然后再加上一层文字的投影效果。

h1 {
    position: relative;
    font-size: 70px;
    font-family: Arial;
    color: #fff;
    text-shadow: 0 0 10px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,1), 0 0 40px rgba(255,255,255,1);
    animation: neon 1.5s ease-in-out infinite alternate;
}

h1::before{
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #ff2ea0;
    animation: blur 3s ease-in-out infinite;
}

@keyframes neon {
    from {
        text-shadow: 0 0 10px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,1), 0 0 40px rgba(255,255,255,1);
    }

    to {
        text-shadow: 0 0 5px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1);
    }
}

@keyframes blur {
    from {
        opacity: 0.8;
        filter: blur(0px);
    }

    to {
        opacity: 0;
        filter: blur(35px);
    }
}

代码中我们使用了text-shadow来实现文字的投影效果，同时又使用了animation动画来实现光晕效果的闪烁，并在伪元素中引入了一个模糊效果，制造出霓虹字效果的同时也增强了可读性。

下面是完整的代码示例：

<style>
    h1 {
        position: relative;
        font-size: 70px;
        font-family: Arial;
        color: #fff;
        text-shadow: 0 0 10px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,1), 0 0 40px rgba(255,255,255,1);
        animation: neon 1.5s ease-in-out infinite alternate;
    }

    h1::before{
        content: attr(data-text);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: #ff2ea0;
        animation: blur 3s ease-in-out infinite;
    }

    @keyframes neon {
        from {
            text-shadow: 0 0 10px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,1), 0 0 40px rgba(255,255,255,1);
        }

        to {
            text-shadow: 0 0 5px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1);
        }
    }

    @keyframes blur {
        from {
            opacity: 0.8;
            filter: blur(0px);
        }

        to {
            opacity: 0;
            filter: blur(35px);
        }
    }
</style>

<h1 data-text="WELCOME">WELCOME</h1>

三、实现滑动线效果

在网页标题下面添加一条移动的线条，可以制造出一种很神秘、很时尚的效果。我们可以使用CSS伪元素来实现滑动线效果，具体思路是在标题下面添加一个伪元素作为线条，然后使用CSS动画来实现线条的移动。

h1 {
    position: relative;
    text-align: center;
    font-size: 40px;
    margin-top: 50px;
    color: #333;
}

h1::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background-color: #555;
    animation: line 2s ease-in-out infinite;
}

@keyframes line {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(50%);
    }
}

代码中我们在标题后面加上一个伪元素，然后将其定位到标题下方，再通过transform属性让其跳转到指定位置。最后使用animation属性来让线条滑动。

下面是完整的代码示例：

<style>
    h1 {
        position: relative;
        text-align: center;
        font-size: 40px;
        margin-top: 50px;
        color: #333;
    }

    h1::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 2px;
        background-color: #555;
        animation: line 2s ease-in-out infinite;
    }

    @keyframes line {
        from {
            transform: translateX(-50%);
        }

        to {
            transform: translateX(50%);
        }
    }
</style>

<h1>This is a demo</h1>