iT邦幫忙

2023 iThome 鐵人賽

0
SideProject30

sideproject-簡易網站系列 第 20

Day-20 認識CSS 偽元素 ( before 與 after )

  • 分享至 

  • xImage
  •  

會叫偽元素是因為它並不是真正的網頁元素,但行為與表現又和真正的網頁元素一樣,也可以對其使用 CSS 操控。
偽元素會用兩個冒號開頭,目前分五種
::before、::after、::first-line、::first-letter和::selection
實際用用看before跟after 重點是一定要有「content」空的也沒關係

h1 {
  text-align: center; /* 水平居中文本内容 */
  font-size: 50px;
}
h1::before{
  content:"before"; /*想輸入的內容 會放在文本前*/
  color:yellow; /*可以自行增加h1所沒有的 不增加就會跟隨原本的設定*/
  }
h1::after{
  content:"after"; /*想輸入的內容 會放在文本後*/
  color:purple;
}

https://ithelp.ithome.com.tw/upload/images/20231017/20163238YQVmd9dmSg.png


上一篇
Day-19 了解jQuery
下一篇
Day-21 下拉式選單
系列文
sideproject-簡易網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言