iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 9
1
自我挑戰組

前端之 " wow~原來是這樣啊 "系列 第 9

Day9 來試試看僞元素吧(before/after)

利用僞元素爲你的頁面在添加點東西吧

初接觸僞元素時,覺得有點不直覺,但後續發現它真的滿好用的,很值得好好瞭解它。那麼~什麼是僞元素呢?其中的 " 僞 " 字其實就說出它的精髓,它並沒有被我們撰寫在 HTML 之中,但它可以如同一般元素一般,以文字、圖片的方式呈現在頁面之中。

在 W3Schools 中記錄目前的僞元素共有五個,before / after / first-letter / first-line / selection,其中最常使用的是 before / after 兩者,因此本篇文章以 before / after 爲主題進行講解。
before / after 如其字面上的意思,就是在已經存在的現有元素前 / 後加上內容,撰寫方式只要在你要使用的對象後面以雙冒號接著僞元素即可,例如要在 p 元素後面加上 before 僞元素 p::before 。僞元素內容中,content 是最關鍵的屬性,即使你不需要添加內容,也要添加空值 " ",否則它無法作用。其中 content 可以添加的內容,不止文字,還可以是屬性、圖片等。我們看一個簡單的例子。

首先我們在 HTML 中,寫一個簡單的 p 標籤 <p>這裡有一句話</p> ,畫面顯示如下:

https://ithelp.ithome.com.tw/upload/images/20181024/20111959GhKDeO16W3.png

接著我們在 CSS 當中添加 before / after,

p::before{
 content:"前面加個字";
 color: blue;
}
p::after{
 content:"後面加個字";
 color: red;
}

結果如下:

https://ithelp.ithome.com.tw/upload/images/20181024/20111959PBqvD2A5hu.png

接著我們在 a 標籤 <a href="##"> 首頁 </a> 前面試試看添加一個 icon 圖片,如下圖:

https://ithelp.ithome.com.tw/upload/images/20181024/20111959knIHIEVNil.png

這裡要注意的是僞類預設爲 inline 性質,它沒辦法設置寬高,圖片呈現方式會以原圖的寬高來呈現,可能會使呈現結果出乎我們預料。這時我們可以將圖片呈現於 background-image,並將 display 設置爲 block ,就可以設置寬高。

下一個問題是,當我們設置爲 block,block 性質爲自成一行,它就無法和首頁二字在同一行,這邊我們使用的技巧是將原本的 <a> 標籤元素 position 設置爲 relative ,再將僞元素 position 設置爲 absolute,top 爲 0,切齊 a 標籤,left 爲 0,切齊左邊。

這時還有一個小問題,圖片可能會覆蓋首頁二字,要記得爲 <a> 標籤設置 padding-left 。接著對照一下程式碼吧。

a{
 position: relative;
 padding-left:30px;
 text-decoration:none;
 color:black;
 vertical-align:top;
}
a::before{
 content:"";
 background-image: url("https://i0.wp.com/affordablehousingprojects.com/wp-content/uploads/2018/02/cropped-Home-icon.png");
 background-repeat:no-repeat;
 background-position:center;
 background-size:cover;
 display:block;
 width: 25px;
 height: 25px;
 position: absolute;
 top:0;
 left:0;
}

<a> 標籤中使用僞元素,還有一個特性是點擊僞元素也會觸發 <a> 標籤的點擊事件,此方式會擴大 <a> 標籤的點擊範圍。

那麼承接上述運用到的 position 技巧,我們就開無敵了,可以不只在元素的前後放上元素,而是在任何你想要的位置。那麼我們來試試看利用這個方式幫圖片在 hover 時,上一層透明遮罩。效果如下:

hover圖片

在這個範例中,我們在圖片被hover的時候,加上僞元素,設置大小與原來的元素一樣大 width: 100%; height: 100%;,設置背景顏色爲白色,透明度 0.2,設置位置 position 爲 absolute,top 及 left 皆爲 0 ,使之覆蓋圖片。

container:hover::after{
 content:"";
 width: 100%;
 height: 100%;
 background-color: rgba(255,255,255,0.2);
 position:absolute;
 top: 0;
 left: 0;
}

僞元素大部分被用來清除浮動及添加特效,還有一個情境下很好被使用,像是相同元素中,只有其中一個要額外加上其他元素時,就可以單獨爲該元素加上僞元素,就不用特地在它的 html 中添加額外標籤了。

以上爲僞元素的基礎說明,試試看吧 /images/emoticon/emoticon12.gif


上一篇
Day8 如何設定 CSS 陰影效果呢?
下一篇
Day10 讓圖片好好裝在盒子裡
系列文
前端之 " wow~原來是這樣啊 "30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
CSScoke
iT邦新手 3 級 ‧ 2018-10-24 10:21:18

努力貼文~加油加油~ /images/emoticon/emoticon08.gif

野生大神csscoke出現了!!

Lai iT邦新手 5 級 ‧ 2018-10-24 11:41:42 檢舉

努力努力,感謝大神提醒文章有誤的地方^^ 讓我邊貼文邊長知識:)

CSScoke iT邦新手 3 級 ‧ 2018-10-24 11:56:44 檢舉

一起練一起練,大家都是研究僧啦

我要留言

立即登入留言