iT邦幫忙

1

鼠年全馬鐵人挑戰 WEEK 13: CSS | 假的!假的!這一切都是假的!偽元素 - 基本用法

  • 分享至 

  • xImage
  •  

什麼是偽元素?

它不是網頁元素,但行為、表現又像元素一樣,可以用CSS操控。
簡易來說它就是個分身術,常用的偽元素有::before::after兩種。

::before是插在元素前方,::after則是後方。
content不管有無內容一定要加喔!就算沒有內容也要寫content: ""


https://ithelp.ithome.com.tw/upload/images/20200503/201248792jqC778mYM.png
https://ithelp.ithome.com.tw/upload/images/20200503/20124879Fk1gZKTK31.png
在檢視網頁原始檔,我們會發現::before::after並不會顯示在上面喔!

<body>
  <style>
    div::before {
      content: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQOh7Cl9uBblrlSPj2WtjByOav55dsJfjhAq0wdhZKAnTzeFq_N&usqp=CAU);
    }

    div::after {
      content: url(https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQOh7Cl9uBblrlSPj2WtjByOav55dsJfjhAq0wdhZKAnTzeFq_N&usqp=CAU);
    }
  </style>
  <div><img
      src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQOh7Cl9uBblrlSPj2WtjByOav55dsJfjhAq0wdhZKAnTzeFq_N&usqp=CAU"
      alt=""></div>

</body>

https://ithelp.ithome.com.tw/upload/images/20200503/20124879USHnclyJMk.png

content裡面也可以插入圖片

偽元素應用

Hello hover 應用


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言