基本上我有这种布局,我试图使带有边框的三角形出现在悬停上。
ul {
background: #ccc;
padding: 20px;
}
ul li {
display: inline-block;
padding: 20px;
}
ul a {
text-decoration: none;
}
ul li:hover a {
border-bottom: 1px solid white;
}
<ul>
<li><a href="">About</a></li>
<li><a href="">shop</a></li>
<li><a href="">contact</a></li>
</ul>
答案 0 :(得分:2)
您可以使用css pseudo
元素来实现此目的。
检查代码段。
ul {
background: #ccc;
padding: 20px;
}
ul li {
display: inline-block;
padding: 20px;
position: relative;
}
ul a {
text-decoration: none;
}
ul li:hover a {
border-bottom: 1px solid white;
}
ul li:hover a:after {
content: '';
position: absolute;
bottom: 15px;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: solid 5px #fff;
border-left: solid 5px transparent;
border-right: solid 5px transparent;
}
<ul>
<li><a href="">About</a></li>
<li><a href="">shop</a></li>
<li><a href="">contact</a></li>
</ul>
答案 1 :(得分:0)
ul {
background: #ccc;
padding: 20px;
}
ul li {
display: inline-block;
padding: 20px;
position: relative;
}
ul a {
text-decoration: none;
}
ul li:hover a {
border-bottom: 1px solid white;
position: relative;
}
ul li:hover a::after {
position: absolute;
content: "";
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid white;
left: 39%;
top: 18px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li><a href="">About</a></li>
<li><a href="">shop</a></li>
<li><a href="">contact</a></li>
</ul>
</body>
</html>