Подчеркивание тега привязки не выравнивается под текстом с анимацией выделения

ProgramBox

Подчеркивание тега привязки не выравнивается под текстом с анимацией выделения

Post author:admin
Запись опубликована:27 марта, 2023
Post category:Вопросы по программированию

#html #css #css-animations

#HTML #css #css-анимации

Вопрос:

Я пытаюсь, чтобы мой тег привязки выполнял анимацию, в которой подчеркивание выделяет текст выше при наведении на него курсора. Не уверен, почему подчеркивание так далеко слева. Есть идеи о том, что может быть причиной проблемы?

Я попытался изменить класс контейнера на position: absolute, а затем установить содержимое внутри как относительное, но это тоже не сработало.

 .section-title {
  display: block;
  font-size: 2em;
  text-align: center;
  padding-bottom: 1.5%;
  font-size: 2em;
  transform: translateX(0%) translateY(-25%);
  /* z-index: -1; */
}

.section-title-highlight {
  color: black;
}

.section-title-highlight:before {
  content: '';
  display: block;
  height: 20px;
  width: 20%;
  background: #35FCCE;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: height .7s;
  z-index: -1;
}

.section-title-highlight:hover:before {
  height: 85%;
}

a {
  text-decoration: none;
  cursor: defau<
  display: block;
}

.container {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 7%;
  margin-top: 0;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  background-color: rgb(236, 236, 236);
}

.container-item {
  display: flex;
  flex-direction: column;
}

#home {
  height: 500px;
  /* margin-bottom: 0; */
  position: relative;
}

#projects {
  height: 600px;
  position: relative;
}

 <div class="container">
  <div id="projects">
    <a href="#" class="section-title-highlight section-title">Projects</a>
    <div class="container-item">
      <p>
        asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
      </p>
    </div>
  </div>

1. Переход, похоже, тоже не работает — это что-то, что вы пропустили в приведенном выше коде, или это просто то, над чем вы все еще работаете?

2. Это .section-title-highlight:before имеет ширину 20%… Должно ли это быть 100%?

3. Ширина зеленого прямоугольника не привязана к ширине вашего текста. Вы можете исправить это, изменив ширину текста в поле или сделав текст дочерним элементом поля.

4. position: absolute; вероятно, это больше головной боли, чем того стоит

5. Салем, ты можешь точно подтвердить, что ты пытаешься сделать? Я просмотрел ваш код, и не совсем ясно, как должна выглядеть подсветка — должно ли это составлять 20% в качестве отправной точки для анимации? Или во всю ширину для начала? И при чем здесь анимация?

Ответ №1:

Вы используете position:absolute в своем блоке выделения, помещая его в точное указанное вами положение относительно родительского контейнера, который имеет position:relative .

Ваше выделение должно быть относительно текста в section-title-highlight , поэтому вам просто нужно сделать его относительным вот так:

 .section-title-highlight {
  position:relative;
}

Ваш элемент выделения теперь помещается в левом нижнем углу текста:

 .section-title-highlight:before {
  height: 2px;      /* or whatever your starting height should be */
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  /* rest of your css here... */ 
}

Другая проблема, с которой вы сталкиваетесь, заключается в том, что выделение отображается намного шире текста. Это связано с тем, что ваш заголовок является блочным элементом, поэтому он растягивается на всю ширину своего контейнера.

Вы можете исправить это, сделав выделение элементом inline или inline-block . В приведенном ниже примере я сделал ваш section-title элемент блочным и оставил ваш section-title-highlight встроенным:

  <div class="section-title">
     <a class="section-title-highlight">Projects</a>
 </div>

Рабочий пример:

 .section-title {
  display: block;
  text-align: center;
  padding-bottom: 1.5%;
  font-size: 2em;
  transform: translateX(0%) translateY(-25%);
  /* z-index: 0; */
}

.section-title-highlight {
  position: relative;
  color: black;
}

.section-title-highlight:before {
  content: '';
  display: block;
  height: 2px;  /* or whatever height you want to start */
  width: 100%;
  background: #35FCCE;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: height .7s;
  z-index: -1;
}

.section-title-highlight:hover:before {
  height: 85%;
}

a {
  text-decoration: none;
  cursor: defau<
  display: block;
}

.container {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 7%;
  margin-top: 0;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  background-color: rgb(236, 236, 236);
}

.container-item {
  display: flex;
  flex-direction: column;
}

#home {
  height: 500px;
  /* margin-bottom: 0; */
  position: relative;
}

#projects {
  height: 600px;
  position: relative;
}

 <div class="container">
  <div id="projects">

    <a href="#" class="section-title-highlight section-title">Projects</a>
      <p>The heading above is using a block display (as in your code), so it is appearing the full width of the container.</p>
    <div class="section-title">
      <span class="section-title-highlight">Projects</span>
    </div>
    <div class="container-item">
      <p>
        This heading is using an inline element so the highlight is only the width of the text
      </p>
    </div>
  </div>
</div>

Ответ №2:

Я получил результат, который, как я полагаю, вы ищете, просто изменив это:

 .section-title-highlight:before {
  width: 20%;
}

к этому:

 .section-title-highlight:before {
  width: 100%;
}

Обсуждение «подделки ширины текста» сводится к следующему: ваша div.projects ширина определяется шириной вашего текста. Ваша a::before ширина определяется шириной div.project . Следовательно, установка для свойства a::before width значения 100% устанавливает его в соответствии с шириной вашего текста.

Также необходимо, как вы уже догадались, абсолютно расположить a::before элемент. Если вы этого не сделаете, он будет в потоке, займет 100% своего контейнера, а затем перенесет ваш текст в следующую строку. Если вы попытаетесь удалить position: absolute из него, это станет для вас очевидным.

Изменение класса контейнера на absolute и элемента на relative только абсолютно позиционирует ваш контейнер в следующем элементе над ним в дереве DOM («иерархия контейнерства», если это имеет больше смысла), который расположен относительно. Так что нет, это не сработает.

Вот код:

     .section-title {
      display: inline-block;
      font-size: 2em;
      text-align: center;
      padding-bottom: 1.5%;
      font-size: 2em;
      transform: translateX(0%) translateY(-25%);
      /* z-index: -1; */
    }

    .section-title-highlight {
      color: black;
    }

    .section-title-highlight:before {
      content: '';
      display: inline-block;
      height: 20px;
      width: 100%;
      background: #35FCCE;
      position: absolute;
      bottom: 0;
      left: 0;
      transition: height .7s;
      z-index: -1;
    }

    .section-title-highlight:hover:before {
      height: 85%;
    }

    a {
      text-decoration: none;
      cursor: defau<
    }

    .container {
      padding: 3% 5% 7%;
      margin: 0 5% 5%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: rgb(236, 236, 236);
    }

    .container-item {
      display: flex;
      flex-direction: column;
    }

    #projects {
      height: 600px;
      position: relative;
    }  

    .projects-header {
      text-align: center;
    }

   <div class="container">
    <div id="projects">
      <div class="projects-header">
        <a href="#" class="section-title-highlight section-title">Projects</a>
      </div>
      <div class="container-item">
        <p>
          Edit: the problem was that the highlight on the title would expand to be as wide as this paragraph, which was not apparent when only "asdf" was in it..
        </p>
      </div>
    </div>
  </div>

Возможно, небольшое разъяснение position будет полезно. Значение по умолчанию для position равно static . Статически расположенные элементы размещаются везде, где они встречаются в потоке страниц, как если бы они были абзацами текста. Относительно расположенный элемент позиционируется относительно его статического положения, где top и left являются смещениями от статического положения. Итак, если, скажем, вы указали свой div.projects a top: -10px , он будет расположен на 10 пикселей выше, чем если бы у вас не было задано никакого position значения (т. Е. Тип позиции был статическим).

Элементы с абсолютным расположением располагаются внутри контейнера с относительным расположением, в top: 0 и left: 0 , если не указано иное. Таким образом, вам не обязательно иметь a top: 0 в вашем a::before стиле. У вас действительно должен быть bottom: 0 , так как в противном случае ваша строка была бы вверху текста, а не внизу.

Редактировать

Исправление (ну, мое исправление) проблемы, которую OP и FluffyKitten описывают в комментариях, потребовало двух шагов.

Структура HTML была такова, что элемент привязки обрабатывался как гибкая ячейка. Таким образом, его ширина была привязана к ширине абзаца. Итак, первый шаг — обернуть тег привязки в div. (Сделано как div.project-header .)
Тег привязки находился в блочном отображении, что означает, что он занимает всю ширину своего контейнера. Исправление этого состояло в том, чтобы изменить display:block стиль .section-title на display: inline-block .

1. Спасибо! У меня есть этот набор, но теперь ширина равна длине div, а не только ширине текста. Есть ли способ обойти это?

2. @Salem Для меня они одинаковой ширины. Возможно, у вас есть ширина, указанная для #projects , которой нет в коде, которым вы поделились? Я разместил свой код, чтобы вы могли сравнить.

3. @BobRodes Если вы добавите больше текста в контейнер, вы увидите проблему. OP описал проблему, но это не было очевидно в коде, потому что текста было недостаточно, чтобы растянуть контейнер на всю ширину. Когда в контейнер добавляется больше текста, он расширяется на всю ширину, и вы можете легче увидеть проблему

4. @FluffyKitten За что тебе спасибо. Теперь я вижу проблему. 🙂 Я посмотрю.

5. @FluffyKitten Спасибо. И исправлено. 🙂

Ответ №3:

Все, что вам нужно сделать, это не использовать своего родственника ни для чего, кроме заголовка, и все будет в порядке!

При этом используется исходный код из вопроса и изменяется ширина поля, уменьшается высота и добавляется переход от края к низу.

     .section-title {
      display: block;
      font-size: 2em;
      text-align: center;
      padding-bottom: 1.5%;
      font-size: 2em;
      transform: translateX(0%) translateY(-25%);
      /* z-index: -1; */
    }

    .section-title-highlight {
      color: black;
    }

    .section-title-highlight:before {
      content: '';
      display: block;
      height: 5px;
      width: 100%;
      background: #35FCCE;
      position: absolute;
      margin-bottom: .2em;
      bottom: 0;
      left: 0;
      transition: margin-bottom .5s , height .7s;
      z-index: -1;
    }

    .section-title-highlight:hover:before {
      height: 85%;
      margin-bottom:0;
    }

    a {
      text-decoration: none;
      cursor: defau<
      display: block;
    }

    .container {
      padding-top: 3%;
      padding-left: 5%;
      padding-right: 5%;
      padding-bottom: 7%;
      margin-top: 0;
      margin-left: 5%;
      margin-right: 5%;
      margin-bottom: 5%;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: 100%;
      background-color: rgb(236, 236, 236);
    }

    .container-item {
      display: flex;
      flex-direction: column;
    }

    #home {
      height: 500px;
      /* margin-bottom: 0; */
      position: relative;
    }

    #projects {
      height: 2em;
      position: relative;
    }

     <div class="container">
      <div id="projects">
        <a href="#" class="section-title-highlight section-title">Projects</a>
        <div class="container-item">
        </div>
      </div>
      <p>
            asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf
          </p>

1. К сожалению, это не устраняет проблему, когда выделение растягивается на всю ширину контейнера — OP описал это в вопросе, но это не было очевидно в коде. Когда в контейнер добавляется больше текста, он расширяется на всю ширину, и вы можете легче увидеть проблему.

2. @FluffyKitten помогает ли это?