以下是一份完整的“详解CSS 伪元素及Content 属性 ”的攻略：

详解CSS 伪元素及Content 属性

1. 什么是伪元素？

伪元素是CSS中的一个特殊概念，它可以让开发者选择某特定元素中的某些内容，并为其应用样式。伪元素不是真实的文档树元素，而是CSS选择器中用到的一类关键字，它们可以通过CSS选择器中的 :: 或 : 前缀进行声明。常用的伪元素包括 ::before 和 ::after。

2. 伪元素的使用

使用伪元素的格式如下：

selector::pseudo-element {
  property: value;
}

其中，selector 是你要选择的元素的选择器，它可以是任何一个CSS选择器。pseudo-element 是伪元素关键字，如 before 或 after 等。你可以为伪元素应用样式，就像你应用任何其他元素的样式一样。

3. Content 属性

Content 属性是伪元素的一个重要特性，它用来定义在元素插入伪元素的内容。例如：

selector::before {
  content: "在前面插入的内容";
}

其中，before 是伪元素的类型，content 属性定义了伪元素的内容。在上面的示例中，CSS会在选择器匹配的元素前插入一个内容为 “在前面插入的内容” 的伪元素。

4. 示例 1：使用伪元素实现清除浮动

伪元素也可以用来实现其他一些常见的效果，以清除浮动为例，使用 clearfix 类来清除浮动：

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
.clearfix {
  *zoom:1;
}

这里我们定义了一个新类 .clearfix 并应用到需要清除浮动的元素上。其中，.clearfix::before 和 .clearfix::after 是在该类元素的前后插入的伪元素，content 属性值为空字符串，用来定义该伪元素的内容（实际上是用来占位）。

在伪元素的样式中，我们为 display 属性设置了 table 值，这样该元素就可以有高度了，之后我们又通过 clear 属性实现了浮动机制的清除。

注意：最后一个属性 *zoom:1; 是IE6/7特有的属性，用于解决IE6/7下父级无法触发hasLayout的bug。

5. 示例 2：生成特殊符号

内容（content）属性也可以被用来生成特殊符号，例如：

.checkmark::before {
  content: "\2714";
  font-size: 20px;
  color: green;
}

在上面的示例中，我们为一个类 .checkmark 的伪元素 before 设置内容属性 content 。其中，我们在 content 属性值中使用了Unicode编码来生成一个勾选符号，接下来通过 font-size 和 color 属性为该符号应用样式。

结束语

这里我们对CSS中的伪元素及其Content属性作了详细解释，并给出了两个示例来展示其用法。希望这份攻略能够帮助你更好地理解伪元素的使用。