偽元素

與上一個單元介紹的偽類不同，偽元素是由兩個冒號 :: 作為前綴詞宣告，緊接著是偽元素的名稱，例如 ::before、::after、::placeholder、::scrollbar 等等。

而 Master CSS 能夠讓我們直接在元素上面應用 CSS 偽元素。

::before 和 ::after

before 和 after 是十分常用的一種偽元素，讓我們不需要額外的 HTML 架構就能達到一樣的效果。

以下方程式碼為例，我們希望在價格前面加上 $ 符號 content:'$':before，價格之後加上 USD 文字 content:'USD':after。

小提示：Master CSS 的 before、after 語法可以只使用一個冒號 :。

<h2 class="content:'$':before content:'USD':after">2,000</h2>

.content\:\'\$\'\:before::before {
  content: "$";
}

.content\:\'USD\'\:after::after {
  content: "USD";
}

::placeholder

::placeholder 語法表示預設文字的屬性，f:#eaebee::placeholder 代表提示文字的屬性是 f:#eaebee。

<input class="... f:#eaebee::placeholder" type="email" placeholder="Enter your email" />

.f\:\#eaebee\:\:placeholder::placeholder {
  color: #eaebee;
}

::scrollbar

有時候開發者需要客製化捲軸的樣式，Master CSS 也有提供一系列的語法，例如 ::scrollbar、::scrollbar-thumb、::scrollbar-track 等等。

並且還能夠搭配上一個單元提到的偽類 :hover 一起使用。

<div class="
  h:6::scrollbar
  bg:#f4f4f6::scrollbar
  rounded::scrollbar

  bg:#e0e2e6::scrollbar-thumb
  rounded::scrollbar-thumb
  bg:#b7bbc6::scrollbar-thumb:hover

  overflow-x:auto p:40
">
  <div class="flex w:max">
    <div class="w:156 h:156 bg:black"></div>
	...
  </div>
</div>

.h\:6\:\:scrollbar::-webkit-scrollbar {
  height: 0.375rem;
}

.bg\:\#f4f4f6\:\:scrollbar::-webkit-scrollbar {
  background-color: #f4f4f6;
}

.rounded\:\:scrollbar::-webkit-scrollbar {
  border-radius: 1e9em;
}

.bg\:\#e0e2e6\:\:scrollbar-thumb::-webkit-scrollbar-thumb {
  background-color: #e0e2e6;
}

.rounded\:\:scrollbar-thumb::-webkit-scrollbar-thumb {
  border-radius: 1e9em;
}

.bg\:\#b7bbc6\:\:scrollbar-thumb\:hover:hover::-webkit-scrollbar-thumb {
	background-color: #b7bbc6;
}

總結

本日 codepen 連結

Master CSS 提供了一系列的偽元素語法，使開發者能夠在 HTML 元素上直接應用 ::before、::after、::placeholder 等常用偽元素，並且語法與原生 CSS 十分類似，因此只要是熟悉 CSS 的開發者，就能快速地上手 Master CSS。

參考

• Master CSS 官網 - 偽元素