在CSS中，我們經常使用:before偽元素來在元素的內容前添加一些裝飾性的內容，比如添加一些圖標、字體、線條等。

.demo:before {
content: '?';
color: red;
}

在上面的代碼中，我們通過:before偽元素在demo元素的內容前添加了一個紅色的心形圖案。其中，content屬性用于添加偽元素的內容，可以是文本、圖標、圖片等實現，這里使用了一個?字符作為心形圖案；color屬性則用于設置偽元素的顏色。

如果想要添加一些更復雜的圖案或圖片，我們可以使用background屬性來替代content屬性：

.demo:before {
display: block;
width: 50px;
height: 50px;
background: url('path/to/image.png') no-repeat;
background-size: contain;
}

在上面的代碼中，我們將:before偽元素的display屬性設置為block，這樣它就可以像正常元素一樣獲得寬度和高度。然后，我們使用了background屬性來設置它的背景圖案，這里使用了一個從文件路徑中獲取的圖片；no-repeat屬性用于禁止背景圖案重復，background-size屬性則用于保證圖案的尺寸適應偽元素大小。

除了添加圖案外，我們還可以使用:before偽元素來添加一些劃線、點綴線等的效果，例如：

.demo:before {
content: '';
display: block;
width: 100%;
height: 2px;
background: gray;
position: absolute;
bottom: 0;
left: 0;
}

在上面的代碼中，我們添加了一條水平的灰色線條來裝飾demo元素。首先，我們設置content屬性為空，因為此時我們不需要添加額外的內容；然后，我們將偽元素的display屬性設置為block，使其可以獲得寬度和高度；width屬性設置為100%，使其占據整個demo元素的寬度；height屬性設置為2px，使其實現一條線的效果；background屬性則用于設置線條的顏色；最后，我們將偽元素的position屬性設置為absolute，使其脫離文本流并可以通過bottom和left屬性來定位在demo元素的底部。