這兩個偽元素一般來說在 HTML 程式裡面並不會看到，但在前台檢查時，卻可以透過 CSS 加上去，讓 DOM 增加更多不同的樣式。
特別注意：
- CSS 裡一定要寫一行：「 content: ' '; 」至於裡面要不要放文字，可以依設計來決定
- 這裡可以加的只能是一般文字和符號，不接受 <br> 這類的 HTML 語法
- 文字的樣式和父元素的相同，想要有不同的樣式，就需要再另外寫語法來指定
- 其他使用方式，可以搜尋Amos的「金魚都能懂的CSS選取器」一書，裡面會有更詳細的使用教學
【HTML】
<div class="events">
<a href="#">活動說明文字兼活動簡述文字</a>
</div>
【CSS】
.events a {
font-size: 14px;
color: #333333;
display: block;
border-left: 3px solid #689c85;
padding-left: 0.5rem;
}
【示意圖】
大概出現的樣式就是像下面的圖，左邊會有一條綠色線段
如果加上偽元素的 CSS 語法後：
.events a:before {
content: '【特別】';
color:#ff0000;
font-weight:bold;
}
在每個 a 的前面都會加上紅色、粗體的文字
前台檢查 HTML 語法時，也可以看到 a 底下出現了 ::before 的偽元素
如果用的是 ::after ，那麼文字就會出現在最後
偽元素的基本使用就介紹到這裡，下次有機會再介紹如何利用這兩個偽元素來增加更多變的樣式。