CSS鼠标悬停时从左到右的下划线进出效果|极客教程

CSS鼠标悬停时从左到右的下划线进出效果

在网页设计中，鼠标悬停效果是非常常见的特效之一，能够极大增强用户交互体验，使页面更具吸引力。下划线是常见的文字装饰，结合鼠标悬停效果，可以实现一种非常简洁而炫酷的hover效果。本文将详细介绍如何使用CSS实现鼠标悬停时从左到右的下划线进出效果。

实现原理

要实现鼠标悬停时从左到右的下划线进出效果，主要思路是通过CSS的伪元素::before和::after来创建两个横向的下划线，并通过CSS3动画来控制下划线的宽度和位置，在鼠标悬停时改变下划线的宽度来达到进出效果的效果。

HTML结构

首先，我们需要准备一个简单的HTML结构，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>CSS鼠标悬停时从左到右的下划线进出效果</title>
</head>
<body>
    <div class="underline">悬停效果</div>
</body>
</html>

CSS样式

接着，我们使用CSS来定义下划线的样式和动画效果：

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
}

.underline {
    position: relative;
    font-size: 2em;
    cursor: pointer;
}

.underline::before,
.underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background-color: #333;
    transition: width 0.3s ease;
    width: 0;
}

.underline::after {
    bottom: auto;
    top: 0;
}
.underline:hover::before {
    width: 100%;
}

.underline:hover::after {
    width: 100%;
}

在上面的CSS代码中，我们首先对.underline元素进行样式的设定，包括字体大小、鼠标指针样式等。接着使用::before和::after伪元素来创建两个横向的下划线，设置宽度为0，并且通过transition属性来实现下划线宽度的变化效果。

然后，我们通过.underline:hover::before和.underline:hover::after来定义鼠标悬停时下划线的宽度变化效果。当鼠标悬停在.underline元素上时，下划线的宽度会从0逐渐增加到100%，实现了从左到右的进出效果。