Question

我知道我可以通过填充或线条高度向上和向下移动边框，但如何左右移动边框以便在文本开始后开始边框开始，如

TEXTTEXTEXT

      ______________

谢谢

当前代码：

div {
  border-bottom: 1px solid white;
}

h1 {
  padding-right: 1em;
}

这会将边框的长度向右延伸，但它不会改变它的起点，所以它看起来像

TEXTTEXTEXT

___________________

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;
     }

Codepen：https://codepen.io/anon/pen/bRPNVZ

如何移动边框底部以便它开始经过文本？

4 个答案: