在 UL 中的第一个 link 之后添加斜线

Question

我想在我的 UL 中的第一个 link 之后添加一个斜线，但它会在每个 link 之后不断添加它。我已经尝试了一百万种不同的东西，但我似乎无法弄清楚。

我的view/html：

    <?php foreach ($this->config->item('languages') as $i => $language): ?>

    <li class="language-nav__item"<?php if ($i == 0): ?> <?php elseif ($i == sizeof($this->config->item('languages'))-1): ?><?php endif; ?>>
        <a class="language-nav__link" href="<?php echo base_url() . $language['alias'] . '/' . $pages[$view]->{'url_' . $language['language']}; echo ($view == 'home')? '' : str_replace('/' . $this->uri->segment(1), '', uri_string()); ?>">
            <?php echo $language['name']; ?> 
        </a>
    </li>
    <?php endforeach; ?>
</ul>

这显示两个links/languages。

然后在我的CSS中：

.language-nav a:nth-child(1):before { 
  content: "/";
  color: white;
}

这会在每个 link 后显示一个斜线。当我这样定位它时：

.language-nav li:nth-child(1):before { 
  content: "/";
  color: white;

}

它在最后一个 link 而不是第一个 link 之后添加了一个斜杠（因此不在它需要的中间位置）

我做错了什么？谢谢。

Answer 1

看起来您的目标是 li 中的第一个 child。

试试下面的方法。

li:first-child a:after {
  content: "/";
}

<ul>
  <li>
     <a class="language-nav__link" href="#">
         English
     </a>
  </li>
  <li>
      <a class="language-nav__link" href="#">
         Spanish
      </a>
  </li>
  <li>
      <a class="language-nav__link" href="#">
         Chinese
      </a>
  </li>
</ul>

这针对第一个 li 中的锚元素（即 ul 的 - first-child）。

编辑 - 或者，将斜杠放在锚点之外：

li:first-child:after {
      content: "/";
    }

<ul>
  <li>
    <a class="language-nav__link" href="#">
      English
    </a>
  </li>
  <li>
    <a class="language-nav__link" href="#">
      Spanish
    </a>
  </li>
  <li>
    <a class="language-nav__link" href="#">
      Chinese
    </a>
  </li>
</ul>

在 UL 中的第一个 link 之后添加斜线

Adding a slash after just the first link in an UL

html

css

pseudo-element