css3+伪元素实现鼠标移入时下划线向两边展开的效果

实现鼠标移入时下划线向两边展开的效果可以使用CSS3中的伪元素::before和::after来实现,具体步骤如下:

实现鼠标移入时下划线向两边展开的效果可以使用CSS3中的伪元素::before和::after来实现,具体步骤如下:

  1. 首先需要在HTML中给需要添加鼠标移入效果的文字元素添加一个类名,例如:class="underline"。
  2. 在CSS中使用伪元素::before和::after为文字下方添加两条横线,并设置样式,例如:
    .underline {
    position: relative;
    }
    .underline::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #000;
    bottom: -2px;
    left: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    }
    .underline:hover::before {
    transform: scaleX(1);
    }
    .underline::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: #000;
    bottom: -2px;
    right: 0;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
    }
    .underline:hover::after {
    transform: scaleX(1);
    }

    上述代码中,对于伪元素::before和::after的设置是相似的,只是在right和left属性上有所不同,并且在鼠标移入时,通过设置transform属性将宽度从0拉伸到100%,从而实现下划线展开的效果。
  3. 最后在HTML中使用class="underline"的文字元素,在鼠标移入时即可被添加下划线展开的效果。

示例1:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Underline Expand</title>
    <style>
        .underline {
            position: relative;
            display: inline-block;
            padding-bottom: 5px;
            font-size: 24px;
            color: #333;
        }
        .underline::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #000;
            bottom: -2px;
            left: 0;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
        }
        .underline:hover::before {
            transform: scaleX(1);
        }
        .underline::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #000;
            bottom: -2px;
            right: 0;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease;
        }
        .underline:hover::after {
            transform: scaleX(1);
        }
    </style>
</head>
<body>
    <p>在文字下方展开下划线的效果:</p>
    <p><span class="underline">Hello World</span></p>
</body>
</html>

示例2:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Underline Expand</title>
    <style>
        .underline-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 200px;
            background-color: #f5f5f5;
        }
        .btn {
            position: relative;
            display: inline-block;
            padding: 10px;
            font-size: 18px;
            color: #333;
            cursor: pointer;
        }
        .btn::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #000;
            bottom: -2px;
            left: 0;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
        }
        .btn:hover::before {
            transform: scaleX(1);
        }
        .btn::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #000;
            bottom: -2px;
            right: 0;
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease;
        }
        .btn:hover::after {
            transform: scaleX(1);
        }
    </style>
</head>
<body>
    <div class="underline-container">
        <div class="btn">Click Me</div>
    </div>
</body>
</html>

以上示例中,第一个示例展示了在单个文字元素上添加下划线展开效果的实现,第二个示例展示了在按钮上添加下划线展开效果的实现,并使用了flex布局 achieve 对齐。

本文标题为:css3+伪元素实现鼠标移入时下划线向两边展开的效果

基础教程推荐