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:   我想人类可能会一直耐心维持这个稍微和平的局面，        但是呢？？？我们现在知道世界上不是只有“中国人”，有无数个国家，种族。    
如何证明呢？做点儿家务活？不行，5岁小孩也能做。    妈妈的单位在颐和园附近，我家住在公主坟，这段路程约莫有20里，是够远的！
  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

举一个例子：

    
   
     我是一个小太阳
    

效果图：

：after

*{

margin: 0;       padding: 0;    }  .main{     width: 300px;     height:60px;     margin: 20px auto ;     position: relative;  }  span:after{     content: url("./img/1.gif");  }

</head>

    
   
     快给我颁奖吧
    

</body>

效果图：

小结

看完了前两个，再看第三个和第四个你会发现，前两个是对文字的伪类，而第三个和第四个是它那一块伪类，它对行级标签也起作用

在上面的两个例子中可以看到

：before 在元素之前添加内容

：after 在元素之后添加内容

以下是我用 ：before 画的一个简易的放大镜

效果图