伪元素基础知识
作者：互联网
伪元素：
概念：指可以在HTML标签的开头或者结尾通过css来添加内容，该内容可以单独设置css 样式。
作用：能够实现一些页面效果，比如三角形
-
语法：
-
在标签开头添加内容
-
::before{
content: ''
} -
::before是伪元素专用选择器，能够在标签开头添加内容，内容可以是图片或者文字或者空格。
-
特点：
通过伪元素添加的内容可以当做改标签的子元素，可以设置盒模型和宽高颜色之类的CSS属性。。
-
‘content 属性可以设置图片，但本身不容易设置位置，一般来说如果添加图片 会通过设置背景图片来处理’ 让content:'';即可
a::after在标签结尾添加内容。
a::after{
content:'';
}
border: 20px solid transparent;(透明色)
利用伪类元素实现三角形。
-
利用 ::before ::after 添加伪元素
-
宽高为0，然后设置透明border: 20px solid transparent;(透明色)
-
将其中一边border 显示出来， border-right: 25px solid rgb(48, 15, 77); 并设置颜色，将伪元素设为绝对定位，父元素（添加伪元素前的标签）设置为相对定位。
-
利用top left 等属性来改变位置
div::before{
content: '';
/* 设置透明色 */
border: 25px solid transparent;
/* 显示的是一个梯形 */
border-right: 25px solid rgb(48, 15, 77);
/* 如果设置成一个三角形 */
position: absolute; /*绝对定位元素真的父类或者body */
top: 25px;
left:-25px;
z-index: -1;
}
代码区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
/* 去掉无序列表前的小圆点 */
list-style: none;
/* 去掉padding */
padding:0px;
width: 400px;
height: 50px;
margin: 50px auto;
position: relative;
}
ul::before{
content: '';
position: absolute;
border: 25px solid pink;
border-left: 25px solid transparent;
top: 0px;
left: -50px;
}
ul::after{
content: '';
position: absolute;
border: 25px solid pink;
border-right: 25px solid transparent;
top: 0px;
right: -50px;
}
li{
float: left;
height: 100%;
width: 100px;
/* 让文本垂直居中 */
text-align: center;
line-height: 50px;
background-color: pink;
/* 字体背景颜色 */
color:snow;
}
/* 将.active 切换成li:hover */
li:hover{
background-color:yellowgreen ;
/* 将标签放大1.5倍 */
transform: scale(1.2);
margin-top: -17px;
position: relative;
z-index: 2;
transition: all 1.5s;
}
/* /* li:hover{
动画时间
transition: all 1.2s;
} */
li:hover::before{
content: '';
position: absolute;
border: 10px solid transparent;
border-right: 9px solid yellowgreen;
top: 40px;
left:-10px;
}
li:hover::after{
content: '';
position: absolute;
border: 10px solid transparent;
border-left: 9px solid yellowgreen;
top: 40px;
right:-10px;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li class='active'>购票</li>
<li>订单</li>
<li>个人中心</li>
</ul>
</body>
</html>
标签：solid,top,元素,基础知识,content,25px,border,transparent 来源： https://blog.csdn.net/m0_61123456/article/details/121168265