Почему отображается только псевдоэлемент before, а after - нет

Рейтинг: 0Ответов: 2Опубликовано: 11.05.2023

Пытаюсь добавить "птичку" к моим будущим "спойлерам" через псевдоэлементы :before и :after но в итоге отображается только before, ПОЧЕМУ? введите сюда описание изображения

HTML

<ul class="open">
  <!-- <li class="active"> <a href="/"><span>Перфоратор</span></a> </li> -->
  <li class="has-sub">
    <a href="/about_us.html">О нас</a>
    <ul>
      <li class="has-sub">
        <a href="/about_us/istoriya-kompanii/">История компании</a>
        <ul>
          <li> <a href="/about_us/istoriya-kompanii/test-1/">Тест 1</a> </li>
          <li> <a href="/about_us/istoriya-kompanii/test-nazvanie-bolshoj-dlinny/">тест название большой длинны</a> </li>
        </ul>
      </li>
      <li> <a href="/about_us/attestaty/">Аттестаты</a> </li>
      <li> <a href="/about_us/podtverzhdayushie-dokumenty/">Подтверждающие документы</a> </li>
    </ul>
  </li>
  <li class="has-sub">
    <a href="/services.html">Услуги</a>
    <ul>
      <li class="has-sub">
        <a href="/ekskovator.html">Аренда спецтехники</a>
        <ul>
          <li> <a href="/uslugi/arenda-spectehniki/ekskavator-pogruzchik/">Экскаватор-погрузчик</a> </li>
          <li> <a href="/uslugi/arenda-spectehniki/samosval/">Самосвал</a> </li>
          <li> <a href="/uslugi/arenda-spectehniki/gidromanipulyator/">Гидроманипулятор</a> </li>
          <li> <a href="/uslugi/arenda-spectehniki/avtobetonosmesitel/">Автобетоносмеситель</a> </li>
        </ul>
      </li>
      <li> <a href="/uslugi/stroitelstvo/">Строительство</a> </li>
      <li> <a href="/uslugi/vodosnabzhenie/">Водоснабжение</a> </li>
      <li> <a href="/uslugi/otoplenie/">Отопление</a> </li>
      <li> <a href="/uslugi/santehnika/">Сантехника</a> </li>
      <li> <a href="/uslugi/elektrika/">Электрика</a> </li>
    </ul>
  </li>
  <li> <a href="/portfolio.html">Портфолио</a> </li>
  <li><a href="#">Новости</a></li>
  <li><a href="/#contacts">Контакты</a></li>
</ul>

CSS

 li.has-sub::after,
  li.has-sub::before
   {
    content: "";
    width: 15px;
    height: 2px;
    background-color: black;
    position:absolute;
    transition: 0.5s transform;
    top: 25px;
    right: 20px;
  }

UPD: Еще псевдоэлементы применились не ко всем элементам .has-sub, только к первому уровню вложенности.

css html псевдоэлемент
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Решение: Оказалось был прописан display: none; для after.

▲ 0

На скрине в инструментах разработчика видно, что существует только before. Плюс ко всему, псевдоэлементы применились не ко всем элементам класса

Вот смотри я сделал пример на твоих стилях. Но слегка поменял позиционирование псевдоэлементов, дабы они были видны.

Все они теперь видны и у каждого элемента они есть.

li {
  position: relative;
  width: 100px;
}
li.has-sub::after,
li.has-sub::before {
  content: "";
  width: 15px;
  height: 2px;
  background-color: black;
  position: absolute;
  transition: 0.5s transform;
  /*
  top: 25px;
  right: 20px;
  */
}
li.has-sub::after {
  top: 25px;
  right: 20px;
}
li.has-sub::before {
  top: 25px;
  right: 40px;
  background-color: red;
}
<ul>
  <li class='has-sub'>Тест</li>
  <li class='has-sub'>Тест</li>
</ul>