Добавление прямоугольника с закругленными углами css поверх текста в меню навигации Wordpress

Question

Я пытаюсь обновить меню навигации по умолчанию в теме Wordpress Astra и пытаюсь добавить прямоугольник с закругленными углами в одно из меню, как показано на фото. Что мне добавить в дополнительную панель CSS? Только вчера начал изучать CSS и Wordpress, я новичок ie.

https://i.stack.imgur.com/w2HKF.jpg

Answer 1

Попробуйте следующее:

.round {
  border: 2px solid white;
  border-radius: 10px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-sm bg-primary navbar-light">
  <ul class="navbar-nav">
    <li class="nav-item active">
      <a class="nav-link" href="#">Active</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link1</a>
    </li>
    <li class="nav-item round">
      <a class="nav-link" href="#">Link2</a>
    </li>

  </ul>
</nav>

Добавьте класс к элементу li на панели навигации или может быть классом элемента, к которому должен быть применен прямоугольник css (в данном случае мы хотим для округления Link2, поэтому я дал класс его элементу li с именем round ), а затем присвоил ему границу, а затем установил его радиус, показанный в коде.