CSS是一種廣泛用于美化網頁的樣式表語言。在網頁設計中，有時需要在文字周圍劃線，以突出該段文字的重要性或區別于其他段落。下面我們就來學習如何通過CSS實現這樣的效果。 首先，我們需要在所需文字所在的p標簽內添加一個容器div，這個div的寬度要比p標簽寬一些，以便在文本周圍形成一條線。 接下來，通過CSS選擇器選擇div元素，并添加以下代碼： pre{ display:inline-block; position:relative; } pre::before{ content:''; position:absolute; left:-10px; top:50%; height:2px; width:calc(100% + 20px); transform:translateY(-50%); background-color:#000; } 首先，我們將div的display屬性設置為inline-block，以便可以在文本內部顯示。然后，將其position屬性設置為relative，以便在其內部創建一個絕對定位的偽元素。 接著，在偽元素pre::before中，我們設置其content屬性為空，即不顯示任何內容。然后將其position屬性設置為absolute，以便相對于其父元素div進行定位。我們將其left屬性設置為-10px，以便讓線條超出div部分，達到連接的效果。然后將其top屬性設置為50%，用于上下對齊。接著設置其高度為2px，寬度為calc(100% + 20px)，這是為了讓線條的長度囊括整個div的寬度。除此之外，還需要將其y軸方向的位置減去其自身高度的一半，以實現上下居中的效果。最后，我們將線條的背景顏色設置為黑色，以便與文字區分。 需要注意的是，這里我們使用了pre標簽作為包含代碼的容器，同時也將偽元素設定為pre的。這是因為在pre中，空格和回車等空白字符是可見的，而其他元素中則不是。 綜上所述，通過以上代碼就可以實現文本周圍劃線的效果。這樣的設計不僅能夠使重要內容更加突出，還能夠為網頁增添些許美感。