W3C 寫道：content 屬性與 ::before 和 ::after 一起使用在文檔中生成內容。

因此，使用 ::before 和 ::after 一定要有 content 否則不會發生作用。

值 與 使用方式

content 的值有：

• normal | none normal為預設，使用這兩個值不會有任何效果出現。

• <string> 值為字串，會在之前或之後加入該字串。因為放的是文字，所以可以針對文字作顏色、字體、大小的變換

p:after {
    content: "我會在文字後";
    font-size: 2em;
    color: purple;
}

• <url> 可以在之前或之後加入圖片、聲音或影像等

p:before {
    content: url(w3css.gif);
}

• <counter> 可以自動計數連續固定標籤

如：可以在數個連續的 p 之前自動計算其順序數值，也可以運用在 ul li 之前
p{
  counter-increment: num
}
p::before{
    content: counter(num) 
}

• attr(<identifier>) 可以在所選元素之前或之後插入指定屬性的值。注意這時候 content 不需要 ''符號

.menu li::before{
    content: attr(href)
}

• open-quote | close-quote 給予開始、結束的引號 “ "，大家應該有看過網頁上有很大的引號，用來做裝飾的，就可以用這兩個值來完成唷～
  

p:before {
    content: open-quote;
}

p:after {
    content: close-quote;
}
p:before,p:after{
    font-size: 3em;
    color: #ccc;
}

• no-open-quote | no-close-quote 在有引號的區段內的指定元素，取消其引號

<p>My name is Iris 這一段會有引號</p>
<p class="hometown">這一段不要引號</p>
<p>這一段會有引號</p>

p:before {
    content: open-quote;
}

p:after {
    content: close-quote;
}

p.hometown:before {
    content: no-open-quote;
}

p.hometown:after {
    content: no-close-quote;
}

• inherit 會繼承前一個的屬性

還可以這樣使用

• 想要在文字前加上獨立區塊的小圓，讓 content 的值為空，再用寬高做出需要的小圓

.menu li::before{
    content: '';
    width: 10px;
    height: 10px;
    display: block;//因為 ::before 是 inline 元素，所以需要將它變成 block
    background: #f00;
    border-radius: 5px;
}

更複雜的用法，可以替主元素加上相對定位，而 ::before 或 ::after 加上絕對定位，就可以做出各種想要的效果出來了。

試玩範例

以上是 偽元素 與 content Property 的使用方式。各位看倌明天見囉～

參考資料：
[1] https://www.w3.org/wiki/CSS/Properties/content
[2] https://www.w3schools.com/cssref/pr_gen_content.asp