#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