簡體   English   中英

如何使用帶有線條邊框的 CSS 在底部邊框中添加小圓圈

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM