淘先锋技术网

首页 1 2 3 4 5 6 7

CSS有两种方法可以实现文字的上划线和下划线,分别为text-decoration和border-bottom。


/* text-decoration方式 */
u {
  text-decoration: underline; /* 下划线 */
}

u::before {
  content: "\00a0\00a0\00a0\00a0"; /* 设置占位符使得划线与文字不紧贴 */
  text-decoration: underline; /* 上划线 */
}

/* border-bottom方式 */
u {
  border-bottom: 1px solid black; /* 下划线 */
}

u::before {
  content: ""; /* border方式无法实现上划线,需通过添加伪元素来实现 */
  display: block;
  border-bottom: 1px solid black;
  margin-bottom: -1px; /* 将伪元素容器与u元素连接起来 */
}

css的上划线和下划线

text-decoration方式的优点是设置简单,并且可以直接实现上划线。而border-bottom方式可以自由调整下划线的属性,例如设置下划线颜色、粗细等。