如何自定义文本下下滑线，下划线距离文字太靠近

Question

ps设计的时候是这样的

写出网页之后是这样

与文本太靠近而且比较粗

有没有什么办法可以自定义下划线？ 如果用border的话我的文字很长需要换行就没有效果了

还是一定要写两个p标签加border吗？

Answer 1

可以参考下这里

Answer 2

最后还是写了两个p标签 有别的方法的同学求教

Answer 3

https://jsfiddle.net/o0smsgL6/1/

用两个行内元素包裹.
外层的元素的字体大小控制下划线距离.
不过这个方法还是得用到两个标签.还是不够优雅.

Answer 4

设置line-hight、border-bottom
<p class="border-bottom">你是我的眼</p>
.border-bottom{

height: 35px;
line-height: 40px;
border-bottom: 2px solid red;

}

Answer 5

/* 这里用 span 举例 */
span {
  border-bottom: 1px solid #fff;
  padding: 2px 0;
}

Answer 6

1. 看看这几种方案 Styling underlines

2. p 里面套 span 吧，要内联元素。

Answer 7

写padding然后给border-bottom

Answer 8

span {
  display: inline-block;
  position: relative;
}
span::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 1px solid #000;
  
  margin-top: 5px;
}

设置伪元素，css如上。根据伪元素的 margin-top 来调节下划线的位置。