如何创建边框底部？
我想在导航栏中的活动链接和悬停链接上设置边框底部。
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&family=Quantico:wght@400;700&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Open Sans", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Quantico", sans-serif;
}
a {
font-family: "Quantico", sans-serif;
text-decoration: none;
color: #111;
}
ul {
list-style: none;
}
/* Theme */
.container {
max-width: 1200px;
margin: 0 auto;
}
.main-color {
color: #009603;
}
/* Nav */
nav {
padding: 20px 0;
overflow: hidden;
}
nav h1 {
float: left;
font-size: 30px;
text-transform: uppercase;
}
nav ul {
float: right;
line-height: 2.5;
}
nav ul li {
float: left;
margin-right: 30px;
}
nav ul li a {
font-weight: 700;
text-transform: uppercase;
padding: 30px 8px;
}
nav ul li a:active,
a:hover {
border-bottom: #009603 3px solid;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pacocha | Garden Projects</title>
<link rel="stylesheet" href="css/style.css" />
<script
src="https://kit.fontawesome.com/1685e275a4.js"
crossorigin="anonymous"
></script>
</head>
<body>
<header>
<nav>
<div class="container">
<a href="index.html">
<h1><i class="fas fa-leaf main-color"></i> Pacocha</h1>
</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
</ul>
</div>
</nav>
</header>
</body>
</html>
但正如您在我的代码片段中看到的 - 我的边框是 1 像素而不是 3 像素。为什么？
我不知道更多细节我可以添加。
这是填充物的随机文本，因为我相信问题已经很清楚 这是填充物的随机文本，因为我相信问题已经很清楚了
HUX布斯2回答
-
qq_遁去的一_1
您overflow: hidden的nav，它隐藏了部分边框，因此您可以尝试增加填充或减少导航的高度来解决它。 -
繁星点点滴滴
对于底部的边框，您只需使用border-bottom: 2px solid red;例子a { color: #fff; background: #333; padding: 5vh; border-bottom: 5px solid #4caf5c;}a:hover{ border-bottom: 5px solid red;}<a>this is a link</a>
随时随地看视频慕课网APP
相关分类
Html5