CSS可以通過添加裝飾性文本或偽元素來在文字左側(cè)加虛線,以下是一些示例代碼:
### 示例1:裝飾性文本
```html
這是一段文字,左側(cè)有一條虛線。
這是另一段文字,也有一條虛線在左側(cè)。
```
```css
p {
position: relative;
padding-left: 20px;
p:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
background: #000;
```
### 示例2:偽元素
```html
這是一段文字,左側(cè)有一條虛線。
這是另一段文字,也有一條虛線在左側(cè)。
```
```css
p {
position: relative;
padding-left: 20px;
p:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
background: #000;
```
### 示例3:使用邊框?qū)傩?/p>
```html
這是一段文字,左側(cè)有一條虛線。
這是另一段文字,也有一條虛線在左側(cè)。
```
```css
.dashed-line {
border-left: 2px dashed #000;
padding-left: 20px;
```
### 示例4:使用偽元素和邊框?qū)傩越Y(jié)合使用
```html
這是一段文字,左側(cè)有一條虛線。
這是另一段文字,也有一條虛線在左側(cè)。
```
```css
.dashed-line {
position: relative;
padding-left: 20px;
.dashed-line:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 2px;
height: 100%;
border-left: 2px dashed #000;
```
這些示例展示了如何在CSS中使用不同的方法來實現(xiàn)文字左側(cè)的虛線裝飾效果,你可以根據(jù)自己的需求和設(shè)計選擇***適合的方法。