CSS設(shè)計(jì)橫線上面寫文字的方法

在CSS中，可以使用"text-decoration"屬性來添加橫線裝飾文本，同時(shí)結(jié)合"position"屬性將文本放置在橫線的上方，以下是一個(gè)簡(jiǎn)單的示例：

HTML代碼：

<div class="line-text">
  <span class="line"></span>
  <span class="text">橫線上面的文字</span>
</div>

CSS代碼：

.line-text {
  position: relative;
  width: 200px;
  height: 20px;
  border-top: 1px solid #000;
}
.line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
}
.text {
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  color: #000;
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)包含"line"和"text"兩個(gè)子元素的"line-text"元素，通過使用"position"屬性，我們可以將"text"元素放置在"line"元素的上方，通過調(diào)整"top"屬性，我們可以控制文本與橫線的垂直距離，通過調(diào)整"width"屬性，我們可以確保文本與橫線具有相同的寬度。