Before 對指定元素添加最後一個子元素
After 對指定元素添加第一個子元素
必須加上 content 屬性,否則無任何效果
我們先建立一段文字
<p>一段文字</p>
接著在CSS中對指定元素添加偽元素
p::before
{
content: "文字前 | ";
}
p::after{
content: " | 文字後";
}
成功顯示偽元素效果~
在F12中可以看到的確在子元素前後加上了偽元素
在使用者觸發元素的特定行為時顯示效果
常見的有:hover
當鼠標觸碰到元素時,就會觸發hover內所定義的屬性。
<p>一段文字</p>
p:hover
{
background-color: pink;
}