使用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>