在進行網頁設計時，我們常常需要在頁面的某些位置上添加文字。在 CSS 中，我們可以使用以下方式來給文字設置樣式：

<span style="color:blue;">color:</span> <span style="color:red;">red;</span>  <span style="color:green;">/* 設置文字顏色為紅色 */</span>
<span style="color:blue;">font-size:</span> <span style="color:red;">16px;</span> <span style="color:green;">/* 設置文字大小為 16px */</span>
<span style="color:blue;">font-family:</span> <span style="color:red;">Arial, sans-serif;</span> <span style="color:green;">/* 設置字體為 Arial */</span>
<span style="color:blue;">text-align:</span> <span style="color:red;">center;</span> <span style="color:green;">/* 文字居中對齊 */</span>

如果我們想在已有的文字之上加上一個額外的文字，我們可以使用 CSS 的::before和::after偽元素來實現。

<span style="color:blue;">.example::before {</span>
<span style="color:green;">  content: "在這里加上一段文字: ";</span>
<span style="color:green;">  font-weight: bold;</span>
<span style="color:blue;">}</span>
<span style="color:blue;">.example {</span>
<span style="color:green;">  font-size: 16px;</span>
<span style="color:blue;">}</span>

在上面的示例代碼中，我們創建了一個::before偽元素，并且使用content屬性來設置需要添加的文本。我們還可以使用一些其他的屬性，如color、font-size、font-family等來給這個文本添加樣式。最后，我們使用類名為example的選擇器來選中這個元素，并設置它的樣式。

除了::before偽元素之外，我們還可以使用::after偽元素來在文字之后添加額外的文本。使用方法與上面類似，只需要將偽元素的名稱改為::after即可。

總之，CSS 中的偽元素和其他屬性可以幫助我們輕松地在網頁上添加樣式，以及在文字之上或之下添加額外的文本。通過靈活運用這些特性，我們可以為用戶提供更加優秀的網頁體驗。