时间戳

首页 > 解决方案 > 伪元素 ::after 和 ::before 在 Foundation 中不起作用有什么原因吗？

sass - 伪元素 ::after 和 ::before 在 Foundation 中不起作用有什么原因吗？

问题描述

我正在使用 Foundation 6 for Sites 创建一个响应式站点。我没有使用伪元素 ::after 和 ::before （我没有忘记 content 属性）。我的浏览器代码检查器没有显示伪元素，并且它们没有在页面上实现。

任何想法为什么会发生以及如何处理它？sass可能有问题吗？

标签： sasszurb-foundationpseudo-elementzurb-foundation-6

解决方案

我一直在使用它们:)

您说您确保将content: ''属性包含在 psuedo 元素中，这很好。

如果组件是 Foundation CSS 组件并且该元素已经使用了伪元素，您可以使用浏览器的检查器找到它并查看 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;
  }
}

推荐阅读