Текст-украшение-цвет не применяется

Question

Действительно простая проблема, но это расстраивает меня. В навигационной панели для страницы я хочу, чтобы она была обычным цветом, а затем имела другой эффект наложения цвета.

При осмотре элемента по какой-либо причине цвет отменяется, и я не уверен, почему.

Screenshot of chrome Inspection

.navigation { 
 
    text-align: center; 
 
    padding: 0 0; 
 
    font-size: 1.25em; 
 
    letter-spacing: .1em; 
 
    text-decoration-color: #ee8719; 
 
    margin: 0; 
 
} 
 

 
.homenav { 
 
    text-decoration-color: #ffffff; 
 
    color: black; 
 
} 
 

 
a:hover { 
 
    color: #ad6205; 
 
} 
 

 
ul li { 
 
    display: inline; 
 
    text-decoration-color: #ee8719; 
 
}

<header class="banner"> 
 
    <nav class="navigation"> 
 
    <ul class="homenav"> 
 
     <li> 
 
     <a href="">Projects</a> 
 
     </li> 
 
     <li> 
 
     <a href="">Blog</a> 
 
     </li> 
 
     <li> 
 
     <a href="">About</a> 
 
     </li> 
 
     <li> 
 
     <a href="">Contact</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>

Любая помощь приветствуется

Answer 1

Это фактически определяется поведение в the spec для text-decoration стиле:

Текст Деко пайки рисуют через потомки. Это означает, что невозможно отключить на потомок текстовое украшение, указанное на одном из его предков.

(Подробнее в https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)

Если вы хотите установить текст цвет, а затем просто использовать color свойство.