【原理】
将伪元素: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 实现鼠标移入 3D 卡片翻转 3D 卡片翻转效果是一种流行的网页视觉效果，常用于增强用户界面的互动性和视觉吸引力。通过 CSS3 的强大功能，我们可以轻松实现这种效果，而无需依赖复杂的 JavaScript 代码。 关键...
以上代码实现了鼠标悬停时显示红色下划线和文字变白的效果。然而，如果希望下划线仅出现在文字下方，而不是整个链接区域，可以使用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的选择器、伪类以及图像处理属性来实现的。下面我们将详细探讨如何利用...
纯CSS实现的鼠标移上图片添加阴影效果是一种常见的交互设计技巧，它可以增强用户体验，使网页元素更加生动和吸引人。这个压缩包文件“纯CSS实现鼠标移上图片添加阴影效果.rar”可能包含了一个示例项目，用于展示如何...
本话题将深入探讨如何利用`:after`伪元素来实现分割线和气泡效果。 首先，让我们理解`:after`的基本语法。`:after`伪元素紧跟在选择器后面，然后使用一对花括号 `{}` 包裹内容。内容可以是文本、图像或者任何其他可...
通过以上几种方式，我们可以根据实际需求选择合适的方法来实现鼠标移入弹出提示框的效果。无论是简单的文本提示还是复杂的功能实现，都有相应的解决方案。在实际应用过程中，还需考虑兼容性、可维护性和性能等方面的...
通过使用`:hover`伪类选择器，我们可以实现鼠标移入大洲时的颜色变化效果。同时，CSS还可以帮助我们定位和布局文字元素，确保它们在地图旁边正确显示。 JavaScript，特别是这里使用的jQuery库（版本1.8.3），是用来...
通过`position`属性（如`relative`、`absolute`或`fixed`）和`z-index`控制伪元素的位置和层次，以实现各种视觉效果。 在提供的文件中，例如`index3.html`、`index4.html`等，可能包含了不同的CSS按钮和伪元素的...
在本文中，我们将深入探讨如何使用CSS3的transitions和伪元素来创建四种独特的鼠标经过（hover）动画效果。这些效果包括滴水效果、圆心放大、旋转放大以及飞翔的独眼怪。CSS3作为现代网页设计的重要工具，提供了一...
在网页设计中，创建动态且吸引用户的交互体验是至关重要的，而“js css3鼠标悬停文字导航菜单下划线效果”就是一个实现这种体验的方法。这个技术结合了JavaScript（js）和CSS3的强大功能，为网页导航菜单的文字项...
在本文中，我们将深入探讨如何使用纯CSS3实现一个鼠标悬停时图片放大，同时两边模糊的视觉效果。这个效果可以增强用户交互性，为网站或应用增添动态美感。我们将详细解析实现这一效果的关键CSS3属性和技术。 首先，...