Как правильнее сделать бордер под текстом?

Рейтинг: 0Ответов: 1Опубликовано: 21.03.2023

Хочу спросить как правильно сделать бордер под текстом на всю ширину?

введите сюда описание изображения

.logo {
    font-size: 18px;
    line-height: 22px;
    color: #070707;
    margin-right: 150px;
    
    
    
}

.header-line {
    padding-top: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    
    
}

.header-line::before {
    content: "";
    position: absolute;
    bottom: -32px;
    width: 870px;
    margin-left: -150px;
  border: 1px solid #828282
    
    
}

.nav-item {
    font-size: 18px;
    line-height: 22px;
    color: grey;
    margin-right: 150px;
    text-decoration: none;
    
}
}
<header class="header">
        <div class="container">
            <div class="header-line">
                <div class="logo">Home</div>
                <nav>
                    <a class="nav-item" href="">About me</a>
                    <a class="nav-item" href="">Skills</a>
                    <a class="nav-item" href="">Portfolio</a>
                    <a class="nav-item" href="">Contacts</a>
                </nav>
            </div>
        </div>
    </header>

css html
Источник: Stack Overflow на русском

Ответы

▲ 1

Делаем ширину псевдо элемента на весь экран, для этого пишем 100vw, т.к. 1vw = 1% от ширины viewport'а (Просто к слову, в CSS существует также единица измерения vh, где 1vh = 1% от высоты viewport'а). И убираем margin-left чтобы элемент не сдвигался в лево. А вообще, советую ознакомиться с другими единицами измерения на MDN, если же хотите ознакомиться более глобально, то и на это есть страница на MDN

.logo {
  font-size: 18px;
  line-height: 22px;
  color: #070707;
  margin-right: 150px;
}

.header-line {
  padding-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.header-line::before {
  content: "";
  position: absolute;
  bottom: -32px;
  width: 100vw; /* Вся ширина экрана */
  border: 1px solid #828282
}

.nav-item {
  font-size: 18px;
  line-height: 22px;
  color: grey;
  margin-right: 150px;
  text-decoration: none;
}
<header class="header">
  <div class="container">
    <div class="header-line">
      <div class="logo">Home</div>
      <nav>
        <a class="nav-item" href="">About me</a>
        <a class="nav-item" href="">Skills</a>
        <a class="nav-item" href="">Portfolio</a>
        <a class="nav-item" href="">Contacts</a>
      </nav>
    </div>
  </div>
</header>