html - 将标题的一部分稍微移到 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 的其余部分高一点，我尝试使用填充但它移动边框而不是文本，边距也无济于事。有什么建议吗？

谢谢

标签： htmlcss

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>