::after vs :after SUSY 2.0 中的伪元素答案

【问题标题】：::after vs :after pseudo element in SUSY 2.0::after vs :after SUSY 2.0 中的伪元素
【发布时间】：2014-03-19 19:53:50
【问题描述】：

在 SUSY v1.x 中，写作：

.content {
  @include container;
}

编译为

.content {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.content:after {
  content: " ";
  display: block;
  clear: both; 
}

现在，在 SUSY 2.0 中它编译为

.content {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.content::after {
  content: " ";
  display: block;
  clear: both; 
}

问题在于 after 伪元素中的两个冒号。一个冒号适用于所有浏览器，包括 IE8 - 所以我想知道： 1) 如果这是有意更改或疏忽，因为两个冒号会放弃对 IE8 的支持，并且 2) 如果有一种解决方法，而无需为 IE8“容器”写出所有额外的 CSS。

【问题讨论】：

标签： susy-compass susy-sass

【解决方案1】：

根据标准，两个冒号是“正确的”，但我不知道 IE8 不支持它。请在GitHub 上提交错误报告，或提交补丁，我会尽快恢复。

【讨论】：

【解决方案2】：

我写这个是为了解决 IE8 项目。由于该浏览器即将退出市场，我认为这可能比根据当前标准重写您的代码不正确更可取。也许只是将 IE8 的解决方法添加到文档中？

$susy: (
    use-custom: (
        clearfix: true,
    )
);
// define custom clearfix because default uses ::after which doesn't work in IE8
@mixin clearfix() {
    &:after {
        content: " ";
        display: block;
        clear: both;
    }
}

【讨论】：