Панель навигации начальной загрузки не хочет показывать разделитель точек между элементами

#html #css #django #bootstrap-4

#HTML #css #django #bootstrap-4

Вопрос:

Я создаю сайт с помощью Django 3.1.2 и Bootstrap 4.5.3. У меня есть некоторые проблемы с панелью навигации.

введите описание изображения здесь

Я хочу, чтобы эти ссылки справа были разделены средними точками. Этот фрагмент css работает некорректно — работает только заполнение, точка не видна:

 .navbar-nav .nav-item:not(:last-child) {
   content: "0B7";
   padding-right: 35px;
}
 

Вот как этот раздел выглядит в html:

 <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto">
            <li class="nav-item nav-link">      
            <a href="{% url 'blog:about' %}" class="menu">O Szkole</a>
        </li>
        <li class="nav-item nav-link">  
            <a href="{% url 'blog:teachers' %}" class="menu">Kadra</a>
        </li>
        <li class="nav-item nav-link">  
            <a href="#" class="menu">Kalendarz</a>
        </li>
        <li class="nav-item nav-link">  
            <a href="{% url 'blog:projects' %}" class="menu">Projekty</a>
        </li>
        <li class="nav-item nav-link">  
            <a href="{% url 'blog:contact' %}" class="menu">Kontakt</a>
        </li>
    </ul>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item nav-link">  
            <a href="#" class="menu">Informacje dla uczniów</a>
        </li>
        <li class="nav-item nav-link">  
            <a href="#" class="menu">Informacje dla rodziców</a>
        </li>
        <li class="nav-item nav-link">  
            <a href="#" class="menu">Dokumenty</a>
        </li>
        {% if user.is_authenticated %}
            <a href="#">Nowy Post</a>
            <a href="#">Wyloguj się</a>
            <a>Witaj: user.username</a>
        {% endif %}
    </ul>
</div>
 

Есть идеи, что я делаю не так?

Ответ №1:

 .navbar-nav .nav-item:not(:last-child) {
    padding-right: 35px;
}

.navbar-nav .nav-item:not(:last-child) ::after {
    content: "0B7";
}
 

содержимое работает только с псевдоэлементами ::after и ::before