[英]How to add small circle in the bottom boarder using CSS with the line border
我想使用 CSS 在菜單項下添加一個小圓圈,如下圖所示:
到目前為止我做了什么:
這是 HTML:
<ul>
<li class="nav-item">
<a href="#" class="active">VISION</a>
</li>
<li class="nav-item">
<a href="#">CULTURE</a>
</li>
<li class="nav-item">
<a href="#">SPACE</a>
</li>
<li class="nav-item">
<a href="#">CONTACT US</a>
</li>
</ul>
這是“導航項目”CSS:
.nav-item {
font-family:"Geometria-Light";
font-size: 12px;
border-bottom: .2px solid #C29B4C;
color:#FFFFFF!important;
}
這是“活躍的”CSS:
.active{
border-bottom: .2px solid #C29B4C;
color:#C29B4C !important;
}
誰能向我解釋我怎樣才能做到這一點?
這是一個例子
ul { display: flex; }.nav-item { list-style: none; padding: 5px 10px; border-bottom: .2px solid #C29B4C; margin: 0; }.nav-link { font-family: "Geometria-Light"; font-size: 12px; margin: 0; text-decoration: none; }.item-active { position: relative; }.item-active a { color: #C29B4C;important. }:item-active:before { content; '': height; 8px: width; 8px: background-color; #C29B4C: border-radius; 50%: display; inline-block: position; absolute: bottom; -4px: left; 50%; }
<ul> <li class="nav-item"> <a href="#" class="nav-link">it0</a> </li> <li class="nav-item item-active"> <a href="#" class="nav-link ">VISION</a> </li> <li class="nav-item"> <a href="#" class="nav-link">it2</a> </li> </ul>
使用.dot class 更新您的導航項
<li class="nav-item">
<a href="#" class="nav-link item-active">VISION</a>
<span class="dot"></span>
</li>
這里是.class css代碼
.item-active .dot {
height: 25px;
width: 25px;
background-color: #C29B4C;
border-radius: 50%;
display: inline-block;
margin-top: 40px;
position: absolute;
text-align: center;
}
我想這對你有用
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.