Нижняя граница под текстом

У меня есть div блок, который я хочу применить border-bottom прямо под текстом, а не по всему div блоку
блок div

#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>

Викрам Прасад, 26.12.2016 в 13:20 (источник)

5 ответов

Вы можете обернуть текст во встроенный элемент like <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, если вы хотите применить свойства уровня блока, но держать его вести себя как встроенный элемент. Таким образом, вы также можете контролировать 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>
```
Самара,
26.12.2016 в 13:24
Добавить css свойство text-decoration: underline

Самара,
26.12.2016 в 13:25
Следует использовать свойство text-decoration.
В вашем случае ее:
text-decoration: underline;
Вы также можете использовать text-decoration для overline и line-through читать о CSS text-decoration свойство

Илья Копысов,
26.12.2016 в 13:26

Вы можете изменить displayзначение для другого blockуровня.

html {
  background: lightgray
}
#info-header {
  font-size: 40px;
  /*text-align: center;
    margin:100px 10px 10px 10px;*/
  display: table;/* shrinks on content */
  margin: 10px auto;/* margin:auto instead text-align for this block  */
  font-family: Poiret One;
  color: lightyellow;
  border-bottom: 1px solid whitesmoke;
}

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

codepen

Дайте <div>фиксированную ширину и дайте ей {margin: 0 auto} для центрирования

body {
  background: #131418;
  text-align: center;
}
#info-header {
  font-size: 40px;
  margin: 0 auto;
  width: 300px;
  color: lightyellow;
  border-bottom: 1px solid whitesmoke;
}

<div id="info-header">this is a nice title</div>