如何调整CSS使导航链接仅在悬停文本时响应，忽略间隔空白区域

你当前导航链接的间隔是通过<a>标签的::after伪元素添加padding-left实现的。伪元素是<a>标签的子元素，属于<a>的可交互范围，因此这块padding区域会被识别为链接的一部分，鼠标移动到该区域时就会触发链接的hover高亮效果。

将间隔从<a>标签内部的padding改为<a>标签外部的外边距，外边距不属于元素本身的交互区域，鼠标移动到间隔位置时不会触发hover效果，仅当鼠标悬停在链接文本上才会触发响应。

你需要修改.dnav相关的CSS代码，调整后如下：

.dnav {
    margin-top:10px;
    margin-bottom: 110px;
}

.dnav a {
    font-family: inconsolata; 
    font-size: 11px; 
    letter-spacing:3px;
    text-transform:lowercase;
    display:inline-block;
    /* 新增：将间隔设置为a标签的右外边距，属于外部空白 */
    margin-right: 15px;
}

.dnav a:after {
    content:'';
    color:{color:link}!important;    
    /* 删掉原有的padding-left设置，不再用伪元素撑间隔 */
}

.dnav a:hover::after {color:{color:link}!important;}

/* 最后一个链接去掉右外边距，避免末尾多出多余空白 */
.dnav a:last-of-type {
    margin-right: 0;
}
.dnav a:last-of-type::after {display:none;}

内容的提问来源于stack exchange，提问作者Takenapart