iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 5
2
Modern Web

喪屍黑白切系列 第 5

Day 05 | 以前要的不是這種以後?! - ::before, ::after

切版時,如果遇到裝飾性的元素,大多會使用偽元素 pseudo-element 來製作,
在我自己的切版經驗中,我覺得他們是網頁很靈魂的存在。

什麼是偽元素?

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s)

CSS 偽元素是一個加在選擇器後方的關鍵字,讓你可以修改被選取元素的特定部分的樣式。

MDN

如何使用他們?

大多數我使用他們的情境,起手式是長這樣(以::before為例)

XXX::before {
  content:'';
}

這個 content 非常的重要,如果你的 ::before 或是 ::after 忘記加上這個 content,他們就完全不會出現。
如果沒有特別設定位置的話,::before 就會在指定元素的前方,::after 則是在後方,
例如說,我現在有一個裡面寫著 Zombie@Dump 的 p

<p>Zombie@Dump</p>

設定以下的 CSS

p::before {
  content:'::before底加';
  color: #d35400;
}

p::after {
  content:'::after底加';
  color: #d35400;
}

這段文字就會長這樣

content 的值有滿多種的,可以參考 MDN
或是::before & ::after 無中生有的僞元素選取器 - 傑克這真是太神奇啦

底下示範一個 ::after 的例子:
HTML

<div class="title">Title</div>

CSS

.title {
  background-color: #e67e22;
  color: #fff;
  width: 200px;
  margin: 0 auto;
  text-align: center;
  font-size: 50px;
  position: relative;
}

.title::after {
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  border: 2px solid #e67e22;
  left: 5px;
  top: 5px;
}

RESULT

::before, ::after 能做到的變化真的很多,後面的內容也會陸續提到。

以上就是今天的內容,如果有講不對的地方再請各位留言讓我知道,謝謝。
明天要講的是 Banner - 多重背景。


上一篇
Day 04 | 順序有那麼重要嗎?Part 2
下一篇
Day 06 | 就是那麼有層次 - 多重背景
系列文
喪屍黑白切30

尚未有邦友留言

立即登入留言