Почему не отображаются цвета на сайте?

Question

Почему если я начинаю менять цвет подчёркивания на белый/близкий к белому, то всё подчёркивание пропадает?

CSS

body {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #26282f;
}

.dws-menu {
    margin-top: 100px;
    width: 100%;
}

ul.dws-ul {
    display: flex;
    padding: 0;
    justify-content: center;
}

li.dws-li {
    list-style: none;
    padding: 10px;
}

li.dws-li a {
    text-decoration: none;
    font-size: 18px;
    color: #ffffff;
    position: relative;
}

li.dws-li a i {
    margin-right: 10px;
}

li.dws-li a::before {
    content: '';
    width: 0;
    height: 3px;
    background-color: #3c3f41;
    position: absolute;
    top: 100%;
    left: 0;
    transition: .8s;
    mix-blend-mode: multiply;
}

li.dws-li a::after {
    content: '';
    width: 0;
    height: 3px;
    background-color: #000000;
    position: absolute;
    top: 100%;
    right: 0;
    transition: .8s;
    mix-blend-mode: multiply;
}


li.dws-li:hover a::before {
    width: 50%;
    transform: translateX(100%);
}

li.dws-li:hover a::after {
    width: 50%;
    transform: translateX(-100%);
}

HTML

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    <link rel="stylesheet" href="css/font-awesome.css" type="text/css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
    <title>CSS3 menu</title>
</head>
<body>
<header>
    <div class="dws-menu">
        <ul class="dws-ul">
            <li class="dws-li"><a href="#"><i class="fa fa-home" aria-hidden="true"></i>Главная</a></li>
            <li class="dws-li"><a href="#"><i class="fa fa-shopping-cart" aria-hidden="true"></i>Магазин</a></li>
            <li class="dws-li"><a href="#"><i class="fa fa-server" aria-hidden="true"></i>Услуги</a></li>
            <li class="dws-li"><a href="#"><i class="fa fa-folder-open" aria-hidden="true"></i>Портфолио</a></li>
            <li class="dws-li"><a href="#"><i class="fa fa-newspaper-o" aria-hidden="true"></i>Новости</a></li>
        </ul>
    </div>
</header>
</body>

БЛОГ НА HUSL

Почему не отображаются цвета на сайте?

CSS

HTML

Ответы (0 шт):