【原理】
将伪元素:before和:after定位到元素底部中间，设置宽度从0变成100%达到目的。
【案例】
首先定义一个块状元素（行内元素没有宽高）并修改样式为一个背景色为浅灰色的矩形，设置相对定位
<div id="underline"></div>
#underline{
width: 200px;
height: 50px;
background: #ddd;
margin: 20px;
position: relative;
}
2、设置:before和:after两个伪元素，将其设置为背景色为蓝色（也就是下划线的颜色），利用绝对定位将两个元素固定到#underline底部中间位置
#underline:before,
#underline:after{
content: "";/*单引号双引号都可以，但必须是英文*/
width: 0;
height: 3px; /*下划线高度*/
background: blue; /*下划线颜色*/
position: absolute;
top: 100%;
left: 50%;
transition: all .8s ; /*css动画效果，0.8秒完成*/
}
3、设置鼠标移入效果
#underline:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/
left:0%;
width:50%;
}
#underline:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/
left: 50%; /*这句多余，主要是为了对照*/
width: 50%;
}
【优化】
1、虽然目的达到了，但是用了两个伪元素，一个向左延伸50%，一个向右延伸50%，只用一个延伸至100%能否达到目的呢？
#underline:after{
content: "";
width: 0;
height: 5px;
background: blue;
position: absolute;
top: 100%;
left: 50%;
transition: all .8s;
}
#underline:hover:after{/*原理是left:50%变成0%的同时，宽度从0%变成100%*/
left: 0%;
width: 100%;
}
2、只定义:after伪元素，将其从距离左边50%宽度为0的同时改变成距离左边0%宽度为100%就可以实现，从而达到了精简代码的目的，而且还多余出了:before方便进行别的操作。
【完整代码】
兼容方面暂时未做处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标移入下划线展开</title>
<style type="text/css">
#underline{
width: 200px;
height: 50px;
background: #ddd;
margin: 20px;
position: relative;
}
#underline:after{
content: "";
width: 0;
height: 5px;
background: blue;
position: absolute;
top: 100%;
left: 50%;
transition: all .8s;
}
#underline:hover:after{
left: 0%;
width: 100%;
}
</style>
</head>
<body>
<div id="underline"></div>
</body>
</html>
.
相关推荐
在本示例中，我们将详细探讨如何利用伪元素`:before`和`:after`以及CSS3的过渡（transition）属性，实现鼠标移入时下划线从中间向两边展开的效果。 首先，我们需要创建一个基础的HTML结构，包含一个ID为"underline...
如果需要兼容不支持`text-decoration-thickness`和`text-underline-offset`的浏览器，可以使用`box-shadow`技巧模拟下划线，通过改变`box-shadow`的`width`实现展开效果。 最后，我们可能需要借助JavaScript来增加...
在本文中，我们将深入探讨如何使用CSS3的`::before`和`::after`伪元素，结合`@keyframes`动画来实现一个鼠标悬停时的动态效果。这两个伪元素在网页设计中扮演着重要的角色，可以让我们在不增加额外HTML标记的情况下...
本主题聚焦于“纯css3实现鼠标移入div图片后按钮飞入动画效果”，这是一项提升用户体验的实用技巧。下面我们将详细探讨如何运用CSS3来创建这样的动画效果。 首先，我们要明确基本的HTML结构。这个效果通常包括一个...
以上代码实现了鼠标悬停时显示红色下划线和文字变白的效果。然而，如果希望下划线仅出现在文字下方，而不是整个链接区域，可以使用CSS3的伪元素`:before`和`:after`。这样，我们可以控制下划线的位置和宽度，使其更...
这个特效利用了JavaScript库jQuery，实现了当鼠标悬停在导航链接上时，下方的下划线会平滑地滑动出来，呈现出一种动态的视觉效果。 jQuery 是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件处理和...
若要在鼠标悬停时显示下划线，开发者可以使用CSS的`:hover`伪类来实现这一效果。例如： ```css label:hover { text-decoration: underline; } ``` 这段代码会在鼠标指针悬停在`<label>`元素上时添加下划线，离开时...
要实现鼠标移入 a 标签后修改 span 的颜色，我们可以使用 CSS 伪类选择器 `:hover`。 `:hover` 伪类选择器用于选择鼠标悬停在元素上的状态。我们可以使用 `.pro:hover` 选择器来选择鼠标悬停在 `.pro` 元素上的状态...
在CSS3中，实现鼠标移上图片高亮效果是一种常见的交互设计手法，它可以提升用户体验，使网站或应用更具吸引力。这个效果通常是通过结合使用CSS的选择器、伪类以及图像处理属性来实现的。下面我们将详细探讨如何利用...
本话题将深入探讨如何利用`:after`伪元素来实现分割线和气泡效果。 首先，让我们理解`:after`的基本语法。`:after`伪元素紧跟在选择器后面，然后使用一对花括号 `{}` 包裹内容。内容可以是文本、图像或者任何其他可...
纯CSS实现的鼠标移上图片添加阴影效果是一种常见的交互设计技巧，它可以增强用户体验，使网页元素更加生动和吸引人。这个压缩包文件“纯CSS实现鼠标移上图片添加阴影效果.rar”可能包含了一个示例项目，用于展示如何...
通过`position`属性（如`relative`、`absolute`或`fixed`）和`z-index`控制伪元素的位置和层次，以实现各种视觉效果。 在提供的文件中，例如`index3.html`、`index4.html`等，可能包含了不同的CSS按钮和伪元素的...
在本文中，我们将深入探讨如何使用CSS3的transitions和伪元素来创建四种独特的鼠标经过（hover）动画效果。这些效果包括滴水效果、圆心放大、旋转放大以及飞翔的独眼怪。CSS3作为现代网页设计的重要工具，提供了一...
在网页设计中，创建动态且吸引用户的交互体验是至关重要的，而“js css3鼠标悬停文字导航菜单下划线效果”就是一个实现这种体验的方法。这个技术结合了JavaScript（js）和CSS3的强大功能，为网页导航菜单的文字项...
在本文中，我们将深入探讨如何使用纯CSS3实现一个鼠标悬停时图片放大，同时两边模糊的视觉效果。这个效果可以增强用户交互性，为网站或应用增添动态美感。我们将详细解析实现这一效果的关键CSS3属性和技术。 首先，...
不过，如果仅用CSS，可以通过CSS的伪类（如`:hover`）来响应鼠标悬停事件，或者利用CSS的`animation`属性设定定时变化，实现基本的自动轮播。 总的来说，这个轮播效果结合了CSS的布局、变形和过渡属性，以及可能的...
在CSS3中，鼠标移入样式变化过渡效果是通过一系列技术实现的，这些技术极大地增强了网页的用户体验，使得用户交互更加生动和动态。过渡（Transition）是CSS3的一个重要特性，它允许元素从一种样式平滑地过渡到另一种...
css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪元素 长方体css伪...