我們都知道，CSS 是一種很強大的樣式表語言，它可以將 HTML 文本裝點得漂漂亮亮、高高興興。今天，我想跟大家分享一種很有趣的 CSS 技巧，那就是讓文字和星星在同一行，看起來十分炫酷。 要實現這種效果，我們需要借助偽元素 `:before` 和 `:after`。我們先來看一段代碼示例：

p:before {
content: "* * * * *";
display: inline-block;
font-size: 24px;
margin-right: 10px;
}
p {
font-size: 18px;
line-height: 1.5;
}

以上代碼會在每個 `p` 元素之前添加一個星星圖案，跟文本在同一行展示。我們來分解一下上面的代碼。 首先，我們使用 `:before` 偽元素來創建星星圖案，它的內容屬性 `content` 設置為五個星號，表示我們想要顯示五個星星。接著，我們將它的顯示屬性 `display` 設置為 `inline-block`，這樣它就可以在同一行展示。同時，我們設置了它的字體大小 `font-size` 和右側間距 `margin-right`，以便與文本相對齊。 接下來是 `p` 元素的樣式設置。我們設置了文本的字體大小 `font-size` 和行高 `line-height`，以便獲得舒適的閱讀體驗。 這樣一來，我們就能夠讓文本和星星在同一行展示。你可以自由地調整星星的樣式，例如使用不同的顏色或者大小，以滿足自己的需求。 總的來說，這種技巧不僅僅是一種裝飾性的樣式，它也可以起到引導讀者的作用。當你想強調某一段文本的時候，使用這種樣式可以讓讀者更加容易地注意到它。希望我的分享對你有所幫助，祝你玩得愉快！