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

У меня есть 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>

Метки

5 ответов

  1. Вы можете обернуть текст во встроенный элемент 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>

  2. Вы можете изменить 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

  3. Дайте <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>