如何移动底部边框，使其从文本开始?

Question

我知道我可以通过填充或行高上下移动边框，但是如何左右移动它以使边框的开头在文本开始后开始，例如

文本文本

______________

谢谢

当前代码：

div {
border-bottom: 1px solid white;
}
h1 {
padding-right: 1em;
}

这会将边框的长度向右延伸，但不会更改其起点，因此看起来像

文本文本

___________________

Answer 1

如果使用：after伪类，则可以在标题后添加一个 DOM 元素，该元素可以按照您想要的方式绝对定位。

h1 {
display: inline-block;
padding-right: 1em;
position: relative;
}
h1:after {
content: '';
position: absolute;
left: 20px;
right: 20px;
border-bottom: 1px solid #ccc;
display: block;
}

<h1>TEXTTEXTEXT</h1>

Answer 2

尝试像这样使用文本缩进。不是一个好主意。但解决问题

border-bottom:5px solid #ccc;
margin-left:50px;
text-indent:-40px;

Answer 3

您可以使用box-shadow，但背景必须是可以匹配的纯色。

p {
background: white;
box-shadow: 50px 0px 0px 0px white, 50px 2px 0px 0px black;
display: inline-block;
}

<p>Underlined Text</p>

Answer 4

不是很好，但你可以做这样的事情：

<div>
<h1>TEXT HERE</<h1>
</div>

.CSS：

div {
border-bottom: 3px solid red;
margin-left:50px;
position:relative;
width:200px;
}
h1 {
position: relative;
left: -30px;
margin:0;
padding:0;
}

代码笔：https://codepen.io/anon/pen/bRPNVZ