CSS伪元素实战-优快云博客

本文链接：https://blog.youkuaiyun.com/coderling/article/details/8664550

CSS伪元素是CSS选择器的一种，在div+css布局中用来设置一些特殊效果。

:first-letter	向文本的第一个字母添加特殊样式，如果是中文就是第一个字
:first-line	向文本的首行添加样式
:before	在指定元素之前添加内容
:after	在指定元素之后添加内容

我不知道为什么要分伪元素与伪类，其实它们很相似。下面是一些例子代码，你也可以到 w3cschool上面看，这是个很好的网站，可以学好建站的很多基本的东西。

1、:first-letter

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type = "text/css">
  p:first-letter{
     color:#B10000;
	 font-size:30px;
  }
  </style>
 </head>

 <body>
  <p>欢迎来到我的博客，希望和大家一起交流学习！</p>
  <p>welcome to my blog!</p>
 </body>
</html>

2.:first-line

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type = "text/css">
  p:first-line{
     color:#B10000;
	 font-size:30px;
  }
  </style>
 </head>

 <body>
  <p>欢迎来到我的博客，希望和大家一起交流学习！</br>交流和分享是件快乐的事情。</p>
 </body>
</html>

3:before 与 :after

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style type = "text/css">
  p:before{
     content:"Hello word!";
  }
  p:after{
    content:"Contact me!";
  }
  </style>
 </head>

 <body>
  <p>欢迎来到我的博客，希望和大家一起交流学习!</p>
 </body>
</html>

效果图就不特意贴了。