html - 悬停时的文本下划线更改填充

Question

在我的 CSS 中悬停时添加下划线样式时遇到问题。每当我将鼠标悬停在文本上时，填充/边距都会吓坏。我不确定为什么。这是网站。https://portfolio-blog-5cc56.web.app/

h2:hover {
    position: relative;
    border-bottom: 10px solid #85C0DB;
    display: inline-block;
    line-height: 0.15;
    transition: 0.3s ease;
    margin: 0
}

标签： htmlcss

Answer 1

似乎它正在将您的line-height从 3rem 更改为 0.15。

查看原始css：

h2 {
    font-family: 'EB Garamond', serif;
    font-size: 1.9rem;
    line-height: 3rem; /* <-- */
    font-weight: 400;
    color: black;
    margin: 0;
}