在CSS中，我們經常需要給字體加上一豎線，以起到美化和強調的作用。下面就來介紹一下在字前加一豎線的方法。
首先，我們需要使用偽元素來實現在字前添加一豎線的效果。偽元素有兩個，一個是:before，一個是:after。他們分別表示在元素前和元素后添加內容。
然后，我們需要使用content屬性來添加內容。例如，我們要在字前添加一豎線，就可以寫成content:”|”;
最后，我們需要設置一些樣式，來控制豎線的顏色、寬度和位置。以下是附加的樣式代碼：
```
p{
position:relative;
padding-left:20px;
}
p:before{
content:"";
position:absolute;
left:0;
top:50%;
height:100%;
width:5px;
background:#000;
}
pre{
font-family:Monospace;
background:#f5f5f5;
padding:10px;
border:1px solid #ccc;
}
```
在以上代碼中，我們首先對p標簽和pre標簽分別進行了樣式設置：對于p標簽，我們設置了相對定位和左邊距20像素，這樣才能使豎線不與首字母重合；而對于pre標簽，我們設置了字體、背景、內邊距和邊框等基本樣式。
接著，在p:before 偽元素中，我們用了absolute定位來定位豎線的位置，并設置了寬度、高度、背景等屬性，使其顯得粗細適宜，顏色明亮醒目。
最后，我們需要將代碼放在pre標簽里面，使用p標簽來分段，就完成了在字前添加一豎線的效果。
示例代碼如下：
```
``` 這樣，在瀏覽器中運行就可以看到一串加了豎線的段落了。這是一個簡單的示例，你可以自己根據需要進行樣式的調整，來使效果更加滿意。在CSS中，我們經常需要給字體加上一豎線
偽元素有兩個，一個是:before，一個是:after。
然后，我們需要使用content屬性來添加內容。
最后，我們需要設置一些樣式，來控制豎線的顏色、寬度和位置。