Question

我想在我的UL中的第一个链接后添加斜杠，但它会在每个链接后不断添加它。我已经尝试了一百万种不同的东西，但我似乎无法弄明白。

我的观点/ 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>

这会显示两个链接/语言。

然后在我的CSS中：

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

每个链接后显示一个斜杠。当我像这样定位它时：

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

}

它在最后一个链接后添加了一个斜杠而不是第一个链接（所以不在它需要的中间）

我做错了什么？谢谢。

Answer 1

看起来您定位的是li内的第一个孩子。

尝试以下内容。

＆＃13;

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

＆＃13;

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

＆＃13;

这会定位第一个li内的锚元素（即first-child的 - ul）。

编辑 - 或者，在锚点之外获得斜杠：

＆＃13;

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

＆＃13;

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

＆＃13;

仅在UL中的第一个链接后添加斜杠

1 个答案: