Question

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

任何想法为何会发生以及如何处理？萨斯会麻烦吗？

Answer 1

我一直都在使用它们：）

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

如果该组件是Foundation 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;
  }
}

有什么原因为什么伪元素:: after和:: be在Foundation中不起作用？

1 个答案: