<!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>2-4伪元素选择器</title>
</head>
<style>
li{width:170px;font:30px "隶书";
padding: 5px;margin: 10px;
background-color: lightgray;
list-style-type: none;text-align: center;
border-radius: 5px;}
ul{display: inline-block;}
a{text-decoration: none;}
a:link{color: blue;}
a:visited{color: red;}
a:hover{color: yellow;}
a:active{color: green;}
li:hover::before{
content:'';
display:inline-block;
width:0px;
height:0px;
border-style:solid;
border-width:10px;
border-color: transparent transparent transparent red;
li:hover::after{
content:'';
display:inline-block;
width:0px;
height:0px;
border-style:solid;
border-width:10px ;
border-color: transparent transparent transparent red;
}
</style>
<body>
<ul>
<li><a href="#1">学校概况</a></li>
<li><a href="#2">院校设置</a></li>
<li><a href="#3">教育教学</a></li>
<li><a href="#4">科学研究</a></li>
<li><a href="#5">招生就业</a></li>
<li><a href="#6">合作交流</a></li>
<li><a href="#7">诚聘英才</a></li>
<li><a href="#8">智慧校园</a></li>
</ul>
</body>
</html>
}
这样的效果
