iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

30天搞定CSS及切版系列 第 3

偽元素(pseudo element)、偽類別(pseudo element)

  • 分享至 

  • xImage
  •  

偽元素 : Before 、After

Before 對指定元素添加最後一個子元素

After 對指定元素添加第一個子元素

必須加上 content 屬性,否則無任何效果

我們先建立一段文字

<p>一段文字</p>

接著在CSS中對指定元素添加偽元素

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

成功顯示偽元素效果~

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


偽類別

在使用者觸發元素的特定行為時顯示效果
常見的有:hover
當鼠標觸碰到元素時,就會觸發hover內所定義的屬性。

<p>一段文字</p>
p:hover
{
  background-color: pink;
}


上一篇
display : Inline、Block、Inline-Block
下一篇
尺寸單位 px、em、rem
系列文
30天搞定CSS及切版16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言