nav-menu＆gt; li>一个{

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

这可以通过添加nav-menu-item:after{规则来完成，该规则在<li>标记之后添加一个圆圈，然后将#nav-menu > li {的显示设置为内联块，您应该得到所需的结果在悬停

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果您想在选中时显示点，可以使用javascript将类设置为<li class="nav-menu-item selected">，然后在css中将.nav-menu-item:hover:after {更改为.nav-menu-item.selected:after {

希望这有帮助！

Answer 2

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

修改：我假设您希望在用户点击链接时发生这种情况，然后在该页面上，这就是为什么我使用了数据属性，之前的答案在悬停时做到了。

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

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

nav-menu＆gt; li>一个{
```
text-decoration: none;
color: #000;
position: relative;
```
}
添加了绝对定位在锚点宽度的50％处的伪元素，我还设置了它的宽度，然后使用其宽度的一半的负边距将其居中。这取决于您使用一点点javascript设置所选项目，请参阅第3点。您可能需要调整颜色：

nav-menu＆gt; li> a [data-selected = true]：在{
之后
```
content: "\25CF";
position: absolute;
top: 1.1em;
left: 50%;
width: 10px;
margin-left: -5px;
color: cadetblue;
```
}
添加了数据选择=＆＃34; true＆＃34;属性到选定的锚点，您需要在javascript中执行此操作，因为选择了不同的锚点。这允许步骤2中的css选择正确的锚点。

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

2 个答案:

nav-menu＆gt; li>一个{

nav-menu＆gt; li> a [data-selected = true]：在{