转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果

原帖地址   https://www.cnblogs.com/yangjunfei/p/6739683.html

感谢分享

一、思路:

  将伪元素:before和:after定位到元素底部中间,设置宽度从0变成100%达到目的。

二、实现:

  1、首先定义一个块状元素(行内元素没有宽高)并修改样式为一个背景色为浅灰色的矩形,设置相对定位。

html代码
<div id="underline"></div>

css样式
#underline{
    width: 200px;
    height: 50px;
    background: #ddd;
    margin: 20px;
    position: relative;
}

  2、设置:before和:after两个伪元素,将其设置为背景色为蓝色(也就是下划线的颜色),利用绝对定位将两个元素固定到#underline底部中间位置。

css样式
#underline:before,
#underline:after{
	content: "";/*单引号双引号都可以,但必须是英文*/
	width: 0;
	height: 3px; /*下划线高度*/
	background: blue; /*下划线颜色*/
	position: absolute;
	top: 100%;
	left: 50%;
	transition: all .8s ; /*css动画效果,0.8秒完成*/
}

  3、设置鼠标移入效果。

css样式
#underline:hover:before{/*动画效果是从中间向左延伸至50%的宽度*/
	left:0%;
	width:50%;
}
#underline:hover:after{/*动画效果是从中间向右延伸至50%的宽度*/
	left: 50%; /*这句多余,主要是为了对照*/
	width: 50%;
}

三:优化

  1、虽然目的达到了,但是用了两个伪元素,一个向左延伸50%,一个向右延伸50%,只用一个延伸至100%能否达到目的呢?

css代码
#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>

原文地址:https://www.cnblogs.com/mmzz3322/p/10710881.html

时间: 2024-10-10 08:57:50

转帖 利用伪元素和css3实现鼠标移入下划线向两边展开效果的相关文章

利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果

1.颜色小tip知识 在背景色上方叠加一个黑色半透明层 rgba(0,0,0,.2) 可以得到一个更暗的颜色 在背景色上方叠加一个白色半透明层 rgba(255,255,255,.2) 可以得到一个更亮的颜色 单个颜色实现 hover 和 active 时的明暗变化效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>

[CSS]利用伪元素实现一些特殊图形

给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS伪元素 css中伪元素有四个,分别是:first-line,:first-letter,:before,:after.其中前两个分别选择的是目标元素内第一行文本和第一个字母,可以为其添加多余样式. 而最常用的就是:before和:after,这两个伪元素与前两个的用法不同,而用处也更大. :before,:a

利用伪元素做蒙层

注意: 1.若该元素为块级元素,则其伪元素的宽高继承自该元素. 2.若想对文字位置调整,可对其设置box-sizing: border-box,再通过padding来调整位置. 3.还可对伪元素设置背景图片,并通过设置background-position为百分数,使背景图片在蒙层内调整位置. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">

[CSS]利用伪元素实现一些特殊图形 from baidu校招

最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> -----------------------以上为背景------------------------------ 正方形当然很好做,但是右侧突出来的小角标就得自己想办法了.所以,既然没有到有,自然是用上了CSS中的伪元素. 这个形状跟我们平时经常遇到的小气泡和下拉栏差不多 平常实现我们常是通过添加小的icon来实

利用伪元素:after清除浮动

让页面呈现多列布局时经常会使用  float:left/right ,可是浮动布局会导致父元素的高度为0(未设置高度的情况下),不会根据子元素的高度而变化,另外,后面不需要浮动想在下一行显示的标签出现在浮动元素的后面. #content{background:#000;} .left{width:100px;height:100px;background:#eee;margin:0 10px;float:left;} 所以我们在使用浮动进行布局的时候会需要一个块级元素(行内元素无效)来设置 cl

利用伪元素实现元素居中

效果: 代码: <div class="test"> <div class="testChild">ddddddddddddddddddddddddddddddddddddddddddd ddddddddddddddddddddddddddddddfffffffffffffffffffffffffffffffffffffff d</div> </div> .test{ background:white; height:

【2017-3-30】DOM获取元素 点击、鼠标移入、移出事件 样式控制

1.获取标记对象 + document.getElementById('id'):                        - 获取一个对象 + document.getElementsByClassName('class');      - 获取的是一个数组 + document.getElementsByTagName('标记');          - 获取的也是一个数组 + document.getElementsByName('name');             - 获取的也

利用伪元素对块级元素应用vetical-align:middle使之垂直居中

vetical-align的功能是使行内元素垂直对齐. 可能的值 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部. bottom 把元素的顶端与行中最低的元素的顶端对齐. text-bottom 把元素的底端与父元素字体的底端对齐. length   % 使用 "line-height&qu

CSS练习-导航栏斜线分隔-利用伪元素

开始切第一张图了,第一个遇到的问题是顶部导航栏这里,用斜线分割.想到的思路是用伪类:before或者:after实现 先写html结构. <!-- 导航栏begin --> <div class="header_right fr"> <a href="#" class="link">Home</a> <a href="#" class="link">