CSS文本旁關閉按鈕是一種常用的界面設計元素，它可以讓用戶方便地關閉或隱藏某些內容。在CSS中，可以使用偽元素:before和:after來創建文本旁關閉按鈕的效果。

.close{
position: relative; /* 相對定位 */
display: inline; /* 行內元素 */
margin-left: 10px; /* 左側留出一些空間 */
font-size: 16px; /* 文本大小 */
color: #666; /* 文本顏色 */
}
.close:before, .close:after{
content: ""; /* 偽元素的內容為空 */
display: block; /* 塊級元素 */
width: 2px; /* 寬度 */
height: 18px; /* 高度 */
background: #666; /* 背景色 */
position: absolute; /* 絕對定位 */
top: 50%; /* 上下居中 */
margin-top: -9px; /* 上下居中 */
}
.close:before{
transform: rotate(45deg); /* 左上到右下的斜線 */
}
.close:after{
transform: rotate(-45deg); /* 左下到右上的斜線 */
}
.close:hover:before, .close:hover:after{
background: #222; /* 鼠標懸停時的背景色 */
}

上述代碼中，我們首先定義了一個類名為.close的元素，并用相對定位和行內元素的方式將其放置在文本旁邊。接著，使用:before和:after偽元素來創建兩個斜線，組成“X”形狀的關閉按鈕。通過絕對定位和transform來旋轉兩個斜線，并用背景色和鼠標懸停時的背景色來區分按鈕和按鈕懸停時的樣式。

使用上述代碼，我們就可以輕松添加文本旁關閉按鈕的效果，為頁面增加更好的用戶體驗。