应用before/after伪类时如何CSS命名以及针对ie6/ie7浏览器兼容

应用before/after伪类时如何CSS命名以及针对IE6/IE7浏览器兼容的完整攻略如下：

1. CSS命名

• 命名规范：在需要使用before/after伪类的DOM元素的class名字中，添加:before和:after来区分before伪元素和after伪元素，命名如下：

.element:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
}
.element:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
}

• 多个伪元素使用：如果需要在同一个元素上应用多个伪元素，可以使用数字1、2、3等，来区分不同的伪元素，其命名如下：

.element:before { /* 伪元素1 */
  content: "1";
  position: absolute;
  top: 0;
  left: 0;
}
.element:after { /* 伪元素2 */
  content: "2";
  position: absolute;
  bottom: 0;
  right: 0;
}

• 注意事项：在CSS中，伪类:before和伪类:after的content属性中用的是双引号（""）而不是单引号（''）。双引号和单引号在这里的区别是：双引号可以使用转义字符，而单引号不行。

2. IE6/IE7浏览器兼容

在IE6/IE7浏览器中，虽然也支持:before和:after伪类，但是有一些需要注意的兼容性问题，主要表现在两个方面：

• content属性不兼容：在IE6/IE7中，content属性不被支持，需要通过zoom属性来实现，代码如下：

.element {
  zoom: 1; /* 触发hasLayout */
  position: relative;
}
.element:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  display: block;
  background-color: #000;
}

• 绝对定位后的伪元素超出父元素：在IE6/IE7中，如果使用绝对定位后，伪元素会超出父元素，此时可以通过设置position为relative来解决，代码如下：

.element {
  position: relative;
}
.element:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  display: block;
  background-color: #000;
  position: relative; /* IE6/IE7中修复超出父元素的bug */
}

以上是针对应用:before和:after伪类时如何CSS命名以及针对IE6/IE7浏览器兼容的完整攻略，希望能对你有所帮助。