css中的伪元素
什么是伪元素？
可以先看一下几个小例子：
:first-line 文字的伪元素
现在添加一个块级标签和一个行内标签，并设置它的伪类：
css: p:first-line{ font-size: 20px; color:aquamarine; word-spacing: 20px; /*字体间距*/ } span::first-line{ font-size: 200px; color:red; word-spacing: 20px; }效果如下:
:first-letter 文字的伪元素
现在添加一个块级标签和一个行内标签，并设置它的伪类：
html:
<span>我想人类可能会一直耐心维持这个稍微和平的局面，
但是呢？？？我们现在知道世界上不是只有“中国人”，有无数个国家，种族。</span>
<p>如何证明呢？做点儿家务活？不行，5岁小孩也能做。
妈妈的单位在颐和园附近，我家住在公主坟，这段路程约莫有20里，是够远的！</p>
css:
p:first-letter{
font-size: 35px;
color:aquamarine;
}
span::first-letter{
font-size: 50px;
color:red;
}
效果如下:
小结
看完了这两例子，你们可以发现第一个例子第一行的字体颜色，大小发生了改变，可是在设置中没有对p标签直接设样式，而是在p后面了一个：first-line,其实这就是伪类，html中并没有这个元素，但可以用它设置第一行文字的特殊样式，并且对行内标签不起作用
first:letter 也是伪类，也对行内标签不起作用，但是它设置的内容与第一个有不同，它是设置第一个字的特殊样式。
：before
举一个例子：
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 300px;
height:60px;
margin: 20px auto ;
position: relative;
}
span:before{
content: url("./img/2.gif");
}
</style>
</head>
<body>
<div class="main">
<span>我是一个小太阳</span>
</div>
</body>
</html>
效果图：
：after
*{
margin: 0;
padding: 0;
}
.main{
width: 300px;
height:60px;
margin: 20px auto ;
position: relative;
}
span:after{
content: url("./img/1.gif");
}
</style></head>
<body>
<div class="main">
<span>快给我颁奖吧</span>
</div></body>
效果图：
小结
看完了前两个，再看第三个和第四个你会发现，前两个是对文字的伪类，而第三个和第四个是它那一块伪类，它对行级标签也起作用
在上面的两个例子中可以看到
：before 在元素之前添加内容
：after 在元素之后添加内容
：before 和 ：after 不仅可以在前面或后面添加内容，还可以画一些小图标
以下是我用 ：before 画的一个简易的放大镜
<style>
*{
margin: 0;
padding: 0;
}
.main{
width: 10px;
height:50px;
margin: auto;
border: 1px solid darkgreen;
background: darkgreen;
position: relative;
transform:rotate(124deg);/**设置旋转度数/
-ms-transform:rotate(124deg); /* IE 9 */
-moz-transform:rotate(124deg); /* Firefox */
-webkit-transform:rotate(124deg); /* Safari 和 Chrome */
-o-transform:rotate(124deg);
}
.main:before{
position: absolute;
left:-22px;
top: 34px;
content: " "; /*空盒子*/
width: 50px;
height: 50px;
background: royalblue;
border: 1px solid royalblue;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
</html>
效果图
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。