Есть ли причина, по которой псевдоэлементы :: after и :: before не работают в Foundation?

Question

Я использую Foundation 6 для сайтов для создания адаптивного сайта. Мне не удалось использовать псевдоэлементы :: after и :: before (я не забыл о свойстве content). Мой инспектор кода браузера не показывает псевдоэлементов, и они не реализованы на странице.

Есть идеи, почему это произошло и как с этим бороться? Может ли это быть проблемой с sass?

Answer 1

Я использую их все время:)

Вы сказали, что убедитесь, что включили свойство content: '' в элемент psuedo, так что это хорошо.

Если этот компонент является базовым CSS-компонентом, и этот элемент уже использует элемент psuedo, вы можете найти его с помощью инспектора браузера и посмотреть, на что ориентирован CSS.

Пример:

.notification-reward {
  align-items: baseline;
  animation: jellyIn 1s;
  display: flex;
  position: absolute;
  right: 0;
  top: -58%;

  &::after {
    color: $primary-light;
    content: attr(data-earned-points);
    font-size: $stat-font-size;
    font-weight: 700;
    left: 4.3625rem;
    position: absolute;
    top: 6%;
  }

  &::before {
    color: $primary-light;
    content: '+';
    font-size: rem-calc(44);
    font-weight: 700;
    left: rem-calc(40);
    position: relative;
    top: -1.6525rem;
  }
}