在CSS中，您可以使用text-decoration屬性來添加文字下劃線虛線，以下是一些示例代碼，展示如何實(shí)現(xiàn)這一功能：

示例1：使用text-decoration屬性

p {
  text-decoration: underline;
}

示例2：使用text-decoration-style屬性添加虛線

p {
  text-decoration: underline;
  text-decoration-style: dotted; /* 可以是dotted、dashed等 */
}

示例3：添加虛線并設(shè)置顏色

p {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #ff0000; /* 設(shè)置虛線顏色 */
}

示例4：添加虛線并設(shè)置粗細(xì)

p {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #ff0000;
  text-decoration-thickness: 2px; /* 設(shè)置虛線粗細(xì) */
}

示例5：綜合應(yīng)用樣式

p {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #ff0000;
  text-decoration-thickness: 2px;
  text-decoration-line: overline; /* 可以是overline、line-through等 */
}

示例6：使用偽元素添加虛線

p {
  position: relative; /* 偽元素需要相對(duì)定位 */
}
p::after {
  content: ""; /* 偽元素內(nèi)容為空 */
  position: absolute; /* ***定位 */
  top: 0; /* 偽元素位置 */
  left: 0; /* 偽元素位置 */
  width: 100%; /* 偽元素寬度 */
  height: 1px; /* 偽元素高度 */
  background: #ff0000; /* 設(shè)置背景顏色 */
  border: none; /* 去除邊框 */
}

示例7：使用SVG添加虛線（跨瀏覽器兼容）

<div class="line"></div> <!-- 添加一個(gè)div元素，類名為line -->

.line { /* 使用SVG繪制虛線 */
  position: relative; /* 確保SVG元素有相對(duì)定位 */
}
.line::before { /* 使用偽元素添加SVG內(nèi)容 */
  content: " "; /* 確保有內(nèi)容 */
}
.line::before { /* 使用SVG繪制虛線 */
  position: absolute; /* 確保SVG元素有***定位 */
  top: 0; /* 設(shè)置SVG元素位置 */
  left: 0; /* 設(shè)置SVG元素位置 */
  width: 100%; /* 設(shè)置SVG元素寬度 */
  height: 1px; /* 設(shè)置SVG元素高度 */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1' style='shape-rendering:crispEdges;'><line x1='0' y1='0' x2='1' y2='1' style='stroke:#ff0000;stroke-width:2px;stroke-style:dashed'/></svg>"); /* 添加SVG繪制虛線的背景圖片 */
}