0

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

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

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

3
  • Тут есть "песочница" - вот в нее вставь html и css текстом.
    – ksa
    21 мар в 11:52
  • Что не устраивает в своем подчеркивании?
    – ksa
    21 мар в 15:03
  • @ksa: человек пока ещё сам не знает - просто задел на будущее :-)
    – UModeL
    21 мар в 15:25

1 ответ 1

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>

2
  • а если мне не на всю ширину экрана нужен бордер? я за место width: 100vw; пишу свое значение? и возможно ли как то сделать бордер только под header (om) то есть под словами ?
    – Murtaz Ka
    23 мар в 16:32
  • а если мне не на всю ширину экрана нужен бордер? -- вы сами написали в вопросе, что вам он нужен на всю ширину. я за место width: 100vw; пишу свое значение? -- тогда ширина у него будет, та, которую вы написали. возможно ли как то сделать бордер только под header (om) то есть под словами ? -- полагаю что возможно, но нужно менять разметку и стили.
    – ΝNL993
    23 мар в 16:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.