gpt4 book ai didi

html - 如何在删除 div 的边框时在我的导航栏上添加链接的边框标题?

转载 作者:行者123 更新时间:2023-11-28 02:39:02 25 4
gpt4 key购买 nike

这是现在的样子:我想删除“事件”类元素(即图中的主页)下的灰色边框,同时用橙色较粗的底部边框替换它。我该怎么做?

* {
font-family: 'Asap', sans-serif;
margin: 0;
}

div.header {
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
width: 100%;
border-bottom: solid rgba(0, 0, 0, 0.1) 2px;
}

div.header a.text {
text-decoration: none;
color: gray;
padding: 20px;
text-transform: capitalize;
float: left;
transition: 0.1s;
}

div.header a.text:hover {
color: rgba(0, 0, 0, 0.7);
background-color: rgba(0, 0, 0, 0.1);
}

div.header a.text.active {
color: #ff5e00;
border-bottom: solid #ff5e00;
<!DOCTYPE>
<html>
<head>
<title>Ant Arni's Crappy Site!</title>
<link href="css/main.css" type="text/css" rel=stylesheet>
<link href="https://fonts.googleapis.com/css?family=Asap" rel="stylesheet">
</head>
<body>
<div class=header>
<a href=# class="text active">Home</a>
<a href=# class=text>Members</a>
<a href=# class=text>Handbook</a>
<a href=# class=text>Apply</a>
<a href=# class=text>Staff</a>
</div>
</body>
</html>

最佳答案

您可以在 .active 类中使用 after 并移除 border-bottom

div.header a.text.active {
position: relative;
}

div.header a.text.active::after {
position: absolute;
bottom: -2px;
content: '';
left: 0;
right: 0;
height: 3px;
background-color: #ff5e00;
z-index: 2;
}

关于html - 如何在删除 div 的边框时在我的导航栏上添加链接的边框标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47266007/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com