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

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

首先需要在HTML中给需要添加鼠标移入效果的文字元素添加一个类名，例如：class="underline"。
在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%，从而实现下划线展开的效果。
最后在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+伪元素实现鼠标移入时下划线向两边展开的效果 - Python技术站

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

相关文章