html - 在 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; 时, 它会跳到整个导航的左侧。我试着放一个 <div>在 <li> 内但这没有做任何事情。

有什么想法吗？

Answer 1

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

编辑:我假设您希望在用户单击链接然后进入该页面时发生这种情况，因此我使用数据属性的原因是，之前的答案是在悬停时执行的.

我在这里对你的代码做了三处修改:

1. 添加position:relative；对于你的 anchor ，这允许我在下一个 css block 中使用 position: absolute:

   nav-menu > li > a {

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

2. 添加了绝对定位在 anchor 宽度 50% 处的伪元素，我还设置了它的宽度，然后使用其宽度一半的负边距将其居中。这取决于您使用一点点 javascript 设置所选元素，请参见第 3 点。您可能需要调整颜色:

   nav-menu > li > a[data-selected=true]:after {

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

3. 为选定的 anchor 添加了 data-selected="true"属性，您需要在 javascript 中执行此操作，因为已选择不同的 anchor 。这允许第 2 步中的 css 选择正确的 anchor 。