CSS文字替換效果是一種可以用CSS將一個元素內容替換為純文本或ASCII碼字符的技術。它能夠實現類似于用圖片或Flash展示文本的效果，但更加輕便靈活，同時也提升了網頁的可訪問性。

實現CSS文字替換效果的關鍵是CSS屬性content。這個屬性一般用于偽元素中，可以將元素的內容替換為指定的文本、圖片、符號等。下面是一個簡單的例子：

.box::before {
content: "前綴：";
}

以上代碼將box元素的偽元素before的內容替換為“前綴：”，并將其顯示在box元素的前面。

另一種常見的應用場景是使用CSS文字替換效果實現圖標字體。我們可以將一些SVG或字體文件編碼為Unicode碼點，再將其作為content屬性值，這樣就能夠通過CSS直接在頁面上展示這些矢量圖標，而不用再引入繁重的圖片資源。

/* 使用字體文件中的Unicode編碼作為content值 */
.icon::before {
content: "\f123";
font-family: "FontAwesome";
font-size: 24px;
color: #333;
}

以上代碼用FontAwesome字體中的Unicode編碼作為content值，實現了一個24px大小的FontAwesome圖標。

CSS文字替換效果可以與其他CSS屬性、動畫一起使用，實現更加豐富的展示效果。例如，在hover時改變content值，就能夠實現一些鼠標交互效果：

.box::before {
content: "點擊示例";
background-color: #f7f7f7;
padding: 6px 12px;
border-radius: 3px;
transition: background-color 0.3s;
}
.box:hover::before {
content: "鼠標懸停中";
background-color: #333;
color: #fff;
}

以上代碼實現了一個點擊示例，當鼠標懸停時，偽元素的content值改變，并將背景色由淺色變為深色，并且鼠標光標由箭頭變為手型。

總之，CSS文字替換效果是一種非常實用的CSS技術，可以幫助我們將頁面上的內容更加靈活地展示給用戶，同時提升了可訪問性和頁面性能。