伪元素(pseudo element)、伪类别(pseudo element)

伪元素 : Before 、After

Before 对指定元素添加最後一个子元素

After 对指定元素添加第一个子元素

必须加上 content 属性，否则无任何效果

我们先建立一段文字

<p>一段文字</p>

接着在CSS中对指定元素添加伪元素

p::before
{
   content: "文字前 | "; 
}
p::after{
    content: " | 文字後"; 
}

成功显示伪元素效果~

在F12中可以看到的确在子元素前後加上了伪元素

伪类别

在使用者触发元素的特定行为时显示效果
常见的有:hover
当鼠标触碰到元素时，就会触发hover内所定义的属性。

<p>一段文字</p>

p:hover
{
  background-color: pink;
}