Text Underline on Hover changes padding

user_14673658 0
Viewed 61

I'm having trouble with having adding an underline style on hover in my css. Whenever I hover over the text, the padding/margin freaks out. I'm not sure why. Here is the website. 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
}
css html
1 Answers

It seems like it is changing your line-height from 3rem to 0.15.

See the original css:

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