着色部分的鏈接？

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

附上span標籤

HTML

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

CSS

a span{ 
    color:black; 
}