css - 文本下方的边框底部

Question

我有一个 div block ，我想在文本下方而不是整个 div block 中应用 border-bottomdiv block 是

#info-header {
    font-size: 40px;
    text-align: center;
    margin:100px 10px 10px 10px;
    font-family: Poiret One;
    color:lightyellow;
    border-bottom: 1px solid whitesmoke;
}

<div id="info-header">
  find us through 
</div>

Answer 1

您可以将文本包装在一个内联元素中，例如 <span>并为其应用边框。

HTML:

<div id="info-header">
  <span>some text here...</span>
</div>

CSS:

#info-header span {
  border-bottom: 1px solid whitesmoke;
  display: inline-block;
  vertical-align: top;
}

注意:你可以让你的元素inline-block如果你想应用 block 级属性但保持它的行为像一个内联元素。这样你也可以控制border-width以及文本和边框线之间的距离。

body {
  background: green;
  min-height: 100vh;
  margin: 0;
}
#info-header {
  font-size: 40px;
  text-align: center;
  margin:100px 10px 10px 10px;
  font-family: Poiret One;
  color:lightyellow;
}

#info-header span {
  border-bottom: 1px solid whitesmoke;
  display: inline-block;
  vertical-align: top;
}

<div id="info-header">
  <span>some text here...</span>
</div>