使用 before 動態新增內容 | 點燈坊

before 允許我們動態新增內容，也因為本質是 Element，所以可以設定各種 CSS Property。

Version

CSS 3

before

乍看之下會以為 HTML 有 Awesome CSS，只是 Awesome 是由 CSS 所新增。

<template>
  <div class="title">
    CSS
  </div>
</template>

<style scoped>
.title:before {
  content: 'Awesome';
  color: #f00;
  margin-right: 5px;
}
</style>

第 2 行

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

HTML 實際上只有 CSS 而已。

第 8 行

.title:before {
  content: 'Awesome';
  color: #f00;
  margin-right: 5px;
}

使用 before 動態建立 Awesome：

• content：指定要顯示的內容
• color：由於 before 本質是 element，因此也能設定 CSS property
• margin-right：設定 Awesome 的 right margin

before 是 pseudo-element，理論上該使用 ::，但也可簡寫成 :

• 直覺會以為 before 會新增到原 element 之前，事實上是新增在原 content 之前，但卻是原 element 之內

• 在 DevTools 並不會直接顯示其 property，必須選擇 ::before 才會顯示

inline-block

before 預設為 inline-block，欲使其換行必須改成 block。

<template>
  <div class="title">
    CSS
  </div>
</template>

<style scoped>
.title:before {
  content: 'Awesome';
  color: #f00;
  display: block;
}
</style>

第 8 行

.title:before {
  content: 'Awesome';
  color: #f00;
  display: block;
}

• display: block：為了能讓 before 與原來內容同一行，所以 before 預設為 inline-block，若要使其能換行，必須改用 display: block

Conclusion

• before 是 pseudo-element，理論上該使用 ::，但也可簡寫成 :
• before 一定得搭配 content property，否則不會顯示，最少也必須是 content: ''
• before 的價值在於不修改 HTML 前提下仍可新增內容，若 component 由自己開發，建議直接使用 real element 增加內容，也有助於 SEO；但若 component 是來自於 package 或其他 framework，由於無法變更 HTML，則可使用 before 加以新增

Reference

OXXO Studio, CSS 偽元素 (before 與 after)