在CSS中的文本下定位一个圆圈

Question

我试图在导航中的链接底部的中心位置放置一个5px x 5px的圆圈，以指示用户目前处于哪个页面，但我不知道如何我应该继续讨论这个问题。

目前我有这样的：Image

我试图做到这一点： Image

这是代码：

 <ul id="nav-menu"> 
      <li class="nav-menu-item"> 
       <a href="ourwork.html">Our work</a> 
      </li> 
      <li class="nav-menu-item"> 
       <a href="#whatwedo">What we do</a> 
      </li> 
      <li class="nav-menu-item"> 
       <a href="#blog">Blog</a> 
      </li> 
      <li class="nav-menu-item"> 
       <a href="#contact">Contact</a> 
      </li> 
     </ul> 
    nav { 
    height: 70px; 
    background: #fff; 
    display: flex; 
    align-items: center; 
    padding: 0 75px; 
} 
#nav-logo-link { 
    flex: 1; 
} 
#nav-logo { 
    height: 35px; 
} 
#nav-menu { 
    list-style: none; 
    padding: 0; 
    white-space: nowrap; 
} 
#nav-menu > li { 
    display: inline; 
    margin: 0 10px; 
} 
#nav-menu > li > a { 
    text-decoration: none; 
    color: #000; 
} 

我试图把一个<i>元素<li>和内然后将其定位为绝对位置，同时我可以将其放在正确的高度（因为导航高度是静态的），当我将其设置为left: 0;，它跳转到整个导航的左侧。我尝试在<li>之内放入一个<div>，但那没有做任何事情。

任何想法？

Answer 1

您可以使用after伪元素与UTF8字符一起执行此操作，请参阅以下fiddle。

编辑：我假设你想这当用户点击一个链接，然后在该网页上，因此为什么我用了一个数据属性，以前的答案做它悬停发生。

我做了三次修改您的代码在这里：

1. 添加位置：相对;你的锚，这允许我使用的位置是：在未来的CSS块绝对：

   导航菜单> LI> A {

   text-decoration: none; 
   color: #000; 
   position: relative; 
   

   }

2. 添加了伪绝对定位的元素锚宽度的50％，我也设置它的宽度，然后使用它的一半宽度的负边距将其居中。这依赖于你使用一点javascript设置选定的项目，请参阅第3点。您可能需要调整的颜色：

   NAV-菜单> LI>一个[数据选择=真]：后{

   content: "\25CF"; 
   position: absolute; 
   top: 1.1em; 
   left: 50%; 
   width: 10px; 
   margin-left: -5px; 
   color: cadetblue; 
   

   }

3. 添加一个数据选择=“真“属性到选定的锚点，您需要在javascript中选择不同的锚点。这允许步骤2中的css选择正确的锚点。

Answer 2

这可以通过添加nav-menu-item:after{规则增加了一个圈后<li>标签然后设置显示为#nav-menu > li {内联块，你应该得到悬停

nav { 
 
    height: 70px; 
 
    background: #fff; 
 
    display: flex; 
 
    align-items: center; 
 
    padding: 0 75px; 
 
} 
 

 
#nav-logo-link { 
 
    flex: 1; 
 
} 
 

 
#nav-logo { 
 
    height: 35px; 
 
} 
 

 
#nav-menu { 
 
    list-style: none; 
 
    padding: 0; 
 
    white-space: nowrap; 
 
} 
 

 
#nav-menu > li { 
 
    display: inline-block; 
 
    margin: 0 10px; 
 
} 
 

 
#nav-menu > li > a { 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 

 
.nav-menu-item:hover:after { 
 
    content: "\25CF"; 
 
    display: block; 
 
    opacity: 1; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.nav-menu-item::after { 
 
    content: "\25CF"; 
 
    opacity: 0; 
 
    color: #1ba9b3; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 5px; 
 
    height: 5px; 
 
}

<nav> 
 
    <ul id="nav-menu"> 
 
    <li class="nav-menu-item"> 
 
     <a href="ourwork.html">Our work</a> 
 
    </li> 
 
    <li class="nav-menu-item"> 
 
     <a href="#whatwedo">What we do</a> 
 
    </li> 
 
    <li class="nav-menu-item"> 
 
     <a href="#blog">Blog</a> 
 
    </li> 
 
    <li class="nav-menu-item"> 
 
     <a href="#contact">Contact</a> 
 
    </li> 
 
    </ul> 
 
</nav>

期望的结果进行

如果你想显示点选择，您可以使用JavaScript来设置类是<li class="nav-menu-item selected">时则在CSS中你会改变.nav-menu-item:hover:after {到.nav-menu-item.selected:after {

希望这有助于！