CSS字體后加背景是一個常見的網頁設計技巧，常用于強調特定的文字，使其更具視覺吸引力。作為網頁開發者，我們可以使用CSS中的偽元素來實現這個效果。

p::after {
content: "";
display: inline-block;
height: 1em;
vertical-align: bottom;
width: 100%;
background-color: #f00;
z-index: -1;
position: absolute;
bottom: 0;
left: 0;
transition: height 0.3s;
}
p:hover::after {
height: 2em;
}

上述代碼中，我們使用了::after偽元素來為每個段落添加樣式。該偽元素會在每個p標簽的內容之后添加一個空元素，并設置其樣式為display: inline-block，使其可以水平放置于段落的底部。同時，我們還通過設置height屬性來設定背景高度，并添加了過渡效果來實現背景顏色的平滑過渡。

在鼠標滑過時，我們通過設置:hover偽類來實現背景高度的變化。設置height屬性的初始值為1em，并在:hover狀態下將其增加到2em，使得背景高度可以與文字重疊，并達到良好的視覺效果。

這種CSS字體后加背景的技巧可以大大增強網頁的視覺吸引力，并提高用戶的閱讀體驗。使用偽元素的方式，我們可以實現簡單而靈活的效果，使得網頁開發更加高效、便捷。