在 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;
}

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

有什么想法吗？

Answer 1

这可以通过添加 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: "CF";
  display: block;
  opacity: 1;
  margin-left: auto;
  margin-right: auto;
}
.nav-menu-item::after {
  content: "CF";
  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 将 class 设置为 <li class="nav-menu-item selected"> 然后在 css 中你可以更改 .nav-menu-item:hover:after { 至 .nav-menu-item.selected:after {

希望对您有所帮助！

Answer 2

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

Edit：我假设您希望当用户单击 link 然后在该页面上时发生这种情况，因此我使用了数据属性，之前的答案在悬停时执行。

我在这里对您的代码进行了三处修改：

添加位置：相对；对于你的锚点，这允许我在下一个 css 块中使用 position: absolute:

导航菜单 > li > a {
```
text-decoration: none;
color: #000;
position: relative;
```
}
添加了绝对位于锚点宽度 50% 处的伪元素，我还设置了它的宽度，然后使用其宽度一半的负边距将其居中。这取决于您将 selected 项目设置为 javascript，请参见第 3 点。您可能需要调整颜色：

nav-menu > li > a[data-selected=true]:after {
```
content: "CF";
position: absolute;
top: 1.1em;
left: 50%;
width: 10px;
margin-left: -5px;
color: cadetblue;
```
}
向 selected 锚点添加了 data-selected="true" 属性，您需要在 javascript 中执行此操作作为select 编辑了不同的锚点。这允许第 2 步中的 css 到 select 正确的锚点。

在 CSS 中的文本下方放置一个圆圈

Positioning a circle underneath text in CSS

html

css

shapes

导航菜单 > li > a {

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