html-更多的样式选择器（伪元素选择器）--伪元素（first-letter\first-line\before\after）---ul-li无序列表让鼠标放到菜单栏时候会出现一个跟随的下划线

最新推荐文章于 2024-05-21 23:21:19 发布

¡Venceremo

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量356

点赞数

分类专栏：笔记文章标签：前端

本文链接：https://blog.csdn.net/weixin_47295886/article/details/125747042

版权

笔记专栏收录该内容

52 篇文章 2 订阅

订阅专栏

伪元素选择器：可以向选择器添加特殊的效果

格式：

选择器：伪元素{

属性1：属性值1；

属性2：属性值2；

///}

常用伪元素

伪元素类型	描述
：first-letter	向文本的第一个字符添加特殊样式
：first-line	向文本的第一行（首行）添加特殊样式
:before	在选择器选择的元素之前添加内容，并可以设置添加内容的样式
:after	在选择器选择的元素之后添加内容，并可以设置添加内容的样式

首先：创建无序列表

添加使用伪元素的样式属性

*使用通配选择器清除默认样式

实现效果

表格样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪元素</title>
	<style type="text/css">
		/*清除默认样式*/
		*{
			margin: 0px;
			padding: 0px;
		}
		ul li{
			list-style: none;/*清除单元格样式*/
			float: left;/*表示盒子是否浮动*/
			width: 100px;/*表格盒子的宽度*/
			height: 50px;/*表格盒子的高度*/
			text-align: center;/*表格里面文本的对齐方式在中间*/
			border: 1px solid #333;/*表格的边框样式*/
			line-height: 50px;/*设置行间距--及文字所占据的大小*/
			
		}
		
	</style>
	
</head>
<body>
	<ul class="menu">
		<li class="item">首页</li>
		<li class="item">学院概况</li>
		<li class="item">机构设置</li>
		<li class="item">院部介绍</li>
		<li class="item">新闻中心</li>
	</ul>
	
</body>
</html>

使用伪元素：当鼠标移到表格中的元素时会出现下划线

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪元素</title>
	<style type="text/css">
		/*清除默认样式*/
		*{
			margin: 0px;
			padding: 0px;
		}
		ul li{
			list-style: none;/*清除单元格样式*/
			float: left;/*表示盒子是否浮动*/
			width: 100px;/*表格盒子的宽度*/
			height: 50px;/*表格盒子的高度*/
			text-align: center;/*表格里面文本的对齐方式在中间*/
			border: 1px solid #333;/*表格的边框样式*/
			line-height: 50px;/*设置行间距--及文字所占据的大小*/
			position: relative;
			
			
		}
		/*伪元素 向单元格选选择器之前添加样式*/
		li.item:before{
			content: "";/*内容是空字符串*/
			position: absolute;/*是绝对定位 相对已经定位的父元素 也就是li*/
			top:0;
			left: 0;
			width: 0;
			height: 100%;/*定位到盒子底部*/
			border-bottom: 2px solid red;
			
		}
		li.item:hover:before{
			width: 100%;
		}
	</style>
	
</head>
<body>
	<ul class="menu">
		<li class="item">首页</li>
		<li class="item">学院概况</li>
		<li class="item">机构设置</li>
		<li class="item">院部介绍</li>
		<li class="item">新闻中心</li>
	</ul>
	
</body>
</html>

将表格隐藏（下划线不变）：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>伪元素</title>
	<style type="text/css">
		/*清除默认样式*/
		*{
			margin: 0px;
			padding: 0px;
		}
		ul li{
			list-style: none;/*清除单元格样式*/
			float: left;/*表示盒子是否浮动*/
			width: 100px;/*表格盒子的宽度*/
			height: 50px;/*表格盒子的高度*/
			text-align: center;/*表格里面文本的对齐方式在中间*/
			/*border: 1px solid #333;*//*表格的边框样式*/
			line-height: 50px;/*设置行间距--及文字所占据的大小*/
			position: relative;
			
			
		}
		/*伪元素 向单元格选选择器之前添加样式*/
		li.item:before{
			content: "";/*内容是空字符串*/
			position: absolute;/*是绝对定位 相对已经定位的父元素 也就是li*/
			top:0;
			left: 0;
			width: 0;
			height: 100%;/*定位到盒子底部*/
			border-bottom: 2px solid red;
			
		}
		/*伪类 鼠标在上方 宽度变成原来的100% */
		li.item:hover:before{
			width: 100%;
		}
	</style>
	
</head>
<body>
	<ul class="menu">
		<li class="item">首页</li>
		<li class="item">学院概况</li>
		<li class="item">机构设置</li>
		<li class="item">院部介绍</li>
		<li class="item">新闻中心</li>
	</ul>
	
</body>
</html>

¡Venceremo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-更多的样式选择器（伪元素选择器）--伪元素（first-letter\first-line\before\after）---ul-li无序列表让鼠标放到菜单栏时候会出现一个跟随的下划线

伪元素（first-letter\first-line\before\after）---ul-li无序列表让鼠标放到菜单栏时候会出现一个跟随的下划线 position: absolute; //position: relative; // line-height: 50px; 设置行间距//float: left;*表示盒子是否浮动*/list-style: none;/*清除单元格样式*/...
复制链接

扫一扫