[分享]css下划线距离怎么调

CSS下划线是网页设计中常用的一种装饰性效果。但有时候划线距离文字的位置会让人感觉不协调，该如何调整呢？下面介绍几种方法。/ 1. 使用lineheight / .text { textdecorat...

CSS下划线是网页设计中常用的一种装饰性效果。但有时候划线距离文字的位置会让人感觉不协调，该如何调整呢？下面介绍几种方法。

/* 1. 使用line-height */
.text {
  text-decoration: underline;
  line-height: 2em; /* 值可以自行调整 */
}

/* 2. 使用padding或margin */
.text {
  text-decoration: underline;
  padding-bottom: 5px; /* 值可以自行调整 */
  /* 或 */
  margin-bottom: 5px; /* 值可以自行调整 */
}

/* 3. 使用border-bottom */
.text {
  border-bottom: 1px solid black; /* 值可以自行调整 */
  padding-bottom: 2px; /* 值可以自行调整 */
}

/* 4. 使用伪元素 */
.text:before {
  content: "";
  display: block;
  border-bottom: 1px solid black; /* 值可以自行调整 */
  width: 50%; /* 值可以自行调整 */
  margin: 0 auto; /* 居中 */
  margin-bottom: 5px; /* 值可以自行调整 */
}

.text {
  text-decoration: none; /* 去掉原有的下划线 */
  text-align: center; /* 居中 */
} 

在实际应用中，我们可以根据实际情况选择合适的方法进行调整。