Why is the underlining of the hyperlink different from the font color?

when beginners learn HTML/CSS to write static web pages, they find hyperlinks in li. When the mouse hovers over them, the color of the underline is different from the font, and they do not find out where the color is set in the CSS code.

<li class="menu-item clearfloat">
                        <div class="title"><a href="-sharp">
                            <h4>Voluptate cillum fugiat.</h4>
                            <p class="comment">Chess, tomato, mushroom, onions

</a></div> <div class="line"></div> <div class="price">$50</div> </li>
.menu-list .title, .menu-list .line{
    float: left;
}

.menu-list .price{
    float: right;
}

/*.menu-list .title{
    width: 230px;
}*/

.menu-item .line{
    width: 192px;
    margin-top: 10px;
    margin-left: 45px;
    border-top: 1px solid -sharpe3e1e1;
}

/*.menu-item .title a:hover{
    text-decoration: none;
}*/

.menu-item .title h4{
    color: -sharpD6D6D6;
}

.menu-item .comment{
    margin-top: 4px;
    color: -sharpb7b7b7;
    font-size: 12px;
}

Mar.13,2021

check whether a tag is styled in global css


in a tag:
text color is in 'color' attribute,
underline style is in' border-bottom' attribute,
you only set 'color', not set' border-bottom'


check whether text-decoration-color


has been solved: there are too many div hierarchies in HTML. Caused a problem with CSS selection. So by default the underline is blue. Just set the font color of the a tag separately in CSS, and then set the font color of the p element in title.
previously setting the color of h4 in the a tag did not affect the a tag hover style.

Menu