переместить часть заголовка чуть выше css

Question

надеюсь, вы можете помочь с этим:

У меня есть это html:

article {
  text-align: center;
  background-image: url(img/background.jpg);
  height: 20rem;
}

article h1 {
  font-size: 4rem;
}

article span {
  color: cadetblue;
  padding-bottom: 0.2rem;
  border-bottom: 0.4rem solid rgb(236, 230, 230);
}

<article>
  <h1>Hi, I am <span>web weeb.</span></h1>
  <h2>I'm a Full-stack Web Developer.</h2>
</article>

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

спасибо

Answer 1

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

Вы можете использовать

position: relative;
top: -30px;

article {
  text-align: center;
  background-image: url(img/background.jpg);
  height: 20rem;
}

article h1 {
  font-size: 4rem;
}

article span {
  color: cadetblue;
  padding-bottom: 0.2rem;
  border-bottom: 0.4rem solid rgb(236, 230, 230);
  position: relative;
  top: -30px;
}

<article>
  <h1>Hi, I am <span>web weeb.</span></h1>
  <h2>I'm a Full-stack Web Developer.</h2>
</article>

Answer 2

Для этих целей вы можете использовать свойства CSS transform .

article span {
    color: cadetblue;
    padding-bottom: 0.2rem;
    border-bottom: 0.4rem solid rgb(236, 230, 230);

    display: inline-block;
    transform: translateY(-10px);
}

Прежде всего, мы устанавливаем span для отображения в виде элемента inline-block, чтобы преобразовать и другие. можно применять такие свойства, как ширина, поля и c. После этого мы устанавливаем свойства transform для translateY, что по сути говорит о перемещении элемента вдоль вертикальной оси. Отрицательное значение предоставляется для перемещения элемента вверх.

Answer 3

Добавить position:relative; и top:-20;.

Вы можете сделать встроенный элемент как inline-block и поиграться с дополнительным кодом, так что это приведет к тому, что у вас будет все больше и больше кода ( поэтому я исключаю это).

Другой вариант:

Здесь уже есть код, который говорит о relative, вы можете сослаться на это хорошо. relative сохранит макет на месте.

article {
  text-align: center;
  background-image: url(img/background.jpg);
  height: 20rem;
}

article h1 {
  font-size: 4rem;
}

span {
  color: cadetblue;
  position: relative;
  border-bottom: 0.4rem solid rgb(236, 230, 230);
  border: 1px solid red;
  top: -20px;
}

<article>
  <h1>Hi, I am <span>web weeb.</span></h1>
  <h2>I'm a Full-stack Web Developer.</h2>
</article>