CSS :before ，:after 伪元素

CSS   :before ， :after 伪元素

定义和用法

:before 选择器向选定的元素前面插入内容。

:after 选择器向选定的元素后面插入内容。

使用content属性来指定要插入的内容。

content: normal | string | attr() | url();

默认情况下，生成的伪元素是内联的，但这可以使用属性(display)显示更改。

1.normal 默认值  利用伪类清除浮动。

2.字符串

   插入文字

<p>喜欢</p>


p{
   font-size: 25px;
   font-weight: bold;
}
p:before{
   content: "小白";
   color: red;
}
p:after{
   content: "狗";
   color:green;
 }

  插入文字符号

    quotes 属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号

1.       open-quote：用于添加开始的文字符号
2.       close-quote：用于添加结束的文字符号。
3.       no-open-quote ：并不插入 quotes 属性的开始的文字符号。但增加其嵌套级别
4.       no-close-quote：并不插入 quotes 属性的开始的文字符号。但减少其嵌套级别

<p>HELLO</p>

p{
   font-size: 25px;
   font-weight: bold;
   quotes: "\"" "\"";/*添加双引号要转义*/
}
p:before{
   content: open-quote; 
}
p:after{
   content: close-quote;
}

3.attr(attribute-name)，插入元素的属性值，attribute-name  必须是HTML 元素的属性名如：id，class，href等

<p id="I" class="YOU">LOVE</p>

p{
   font-size: 25px;
   font-weight: bold;
}
p:before{
   content: attr(id);
   color: red;		        
}
p:after{
   content: attr(class);
   color:green;
}

4.url()  插入图片

 <p>HELLO</p>

p:before{
  content: url(img/哆啦A梦.jpg);
}