在CSS中，我們經常需要在文本的上下或者兩側添加一些裝飾線條以美化頁面布局。比如我們可以在文本的左右兩側添加豎線或者在文本的上下添加橫線。

下面是一個示例代碼，我們將文本放在pre標簽中，使用before偽元素在文本上方添加一條橫線，使用after偽元素在文本下方添加一條橫線，使用before和after偽元素在文本左右兩側各添加一條豎線。

pre {
position: relative;
padding: 10px;
font-size: 24px;
font-weight: bold;
}
pre:before,
pre:after {
content: "";
position: absolute;
width: 100%;
height: 4px;
left: 0;
background-color: #333;
opacity: 0.3;
}
pre:before {
top: 0;
}
pre:after {
bottom: 0;
}
pre:before,
pre:after,
pre:before {
content: "";
position: absolute;
width: 4px;
height: 100%;
top: 0;
background-color: #333;
opacity: 0.3;
}
pre:before {
left: 0;
}
pre:after {
right: 0;
}

上面代碼中，我們首先使用position:relative將pre標簽設置為相對定位，然后使用before和after偽元素分別在pre標簽上下方添加一條橫線。

接著使用before和after偽元素在pre標簽左右兩側添加一條豎線。需要注意的是，在添加豎線的時候，我們將before偽元素添加到了before偽元素的樣式中，這是因為before偽元素只能添加一次。

如果我們要改變橫線和豎線的樣式，只需修改background-color和height屬性即可實現不同的效果。