colors - 着色链接的一部分？

Question

我在为链接的一部分着色时遇到了一个小问题。整个链接都用图案着色，但我希望第一部分用另一种图案着色。

这是我的html

<div id="header-wrap">
        <div id="header">
            <nav>
           <ul>
                    <li id="mig"><a href="#mig">#Om mig</a></li>    
                    <li id="portfolio"><a href="#portfolio">#Portfolio</a></li>
                    <li id="kontakt"><a href="#kontakt">#Kontakt</a></li>
                </ul>
        </nav>
        </div>
    </div>

我想用另一种模式填充的是文本其余部分前面的“#”。

这是我的CSS：

#header nav li {
display: inline;
font-family: 'BebasNeueRegular';
color: white;  /* Fallback: assume this color ON TOP of image */
background: url(../img/debut_light.png) repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}

nav #hjem {
margin-right: 530px;
}

nav #mig {
margin-right: 50px;
}

nav #portfolio {
margin-right: 50px;
} 

nav #kontakt {

}

Answer 1

在跨度标记之间包含哈希 #

HTML

<a href="#"><span>#</span>Portfolio</a>

CSS

a span{
    color:black;
 }