在網頁設計中，常常需要用到文字左邊有一條橫線的效果。這種效果可以通過 CSS 中的 border-left 屬性來實現，添加一個左邊的邊框。但是，這種方法不夠靈活，無法控制橫線的粗細、顏色等屬性。

一個更好的方法是使用 CSS 的偽元素（pseudo-element），例如 ::before 或 ::after。通過添加偽元素，我們可以在文字左側添加一個元素，再對該元素添加樣式來實現左側一條線。

以下是實現文字左側劃線的 CSS 代碼：

.line-left {
position: relative;
padding-left: 10px; /* 設置左邊距，避免劃線和文字重合 */
}
.line-left::before {
content: "";
position: absolute;
left: 0; /* 從元素左邊開始繪制 */
top: 50%; /* 將線段居中對齊 */
width: 2px; /* 線段寬度 */
height: 100%; /* 線段高度 */
background-color: #ccc; /* 線段顏色,這里使用 #ccc 作為示例顏色 */
transform: translateY(-50%); /* 將線段居中對齊 */
}

以上代碼中的 .line-left 是一個類選擇器，可以根據需要自行修改。在樣式表中引入該選擇器，即可在需要的地方使用。

在 HTML 中，應該添加一個帶有 .line-left 類名的元素，例如：

<p class="line-left">這是一段帶有左邊橫線的文字。</p>

通過上述 CSS 代碼，文字左邊將出現一條與文字同高的直線。