在CSS中，可以使用padding-left屬性來設(shè)置文字前面的留白，這個屬性可以為元素添加額外的空間，使其內(nèi)容在左側(cè)有一定的距離，以下是一些示例代碼，展示如何使用padding-left來實現(xiàn)文字前面留白的效果：

示例1: 設(shè)置固定寬度的留白

.container {
  padding-left: 20px;
}

示例2: 使用百分比設(shè)置留白

.container {
  padding-left: 10%;
}

示例3: 根據(jù)屏幕大小調(diào)整留白

可以使用媒體查詢（Media Queries）來根據(jù)屏幕大小調(diào)整padding-left的值：

.container {
  padding-left: 20px;
}
@media (min-width: 600px) {
  .container {
    padding-left: 40px;
  }
}

示例4: 使用偽元素添加背景色

可以使用偽元素（Pseudo-elements）來在文字前面添加背景色：

.container {
  position: relative;
}
.container::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 100%;
  background-color: #f0f0f0;
}

示例5: 添加圖片作為背景

可以使用圖片作為背景來實現(xiàn)更復(fù)雜的樣式：

.container {
  position: relative;
  background-image: url('path-to-image.jpg');
  background-repeat: no-repeat;
  background-position: left top;
}

CSS提供了多種方法來實現(xiàn)文字前面的留白效果，包括使用padding-left、百分比、媒體查詢、偽元素和背景圖片等，根據(jù)需要選擇***適合的方法，希望這些示例能幫助你更好地理解和應(yīng)用這些技術(shù)。