添加字符：在<a>之前不包含錨文本

Question

如何在鏈接之前添加字符而不將其包含在可點擊的錨文本中？

HTML這樣的：

<p>blah blah blah <a href="example.com">blah</a></p> 

CSS一樣：

a:before {content: "foo ";} 

給出的結果一樣：等等等等foo blah

期望的結果：等等等等富blah

Answer 1

你可以用它們在虛擬中的僞造來區分它們相同的DOM樹。

你可以使用一個跨度和使用的內容有：

<p>blah blah blah <span></span><a href="example.com">blah</a></p> 

p span:before {content: "foo ";} 

Answer 2

/* CSS */ 
 
.link:before {content: "foo ";}

<!-- HTML --> 
 
<p> 
 
    blah blah blah 
 
    <span class="link"><a href="example.com">blah</a></span> 
 
</p>

Answer 3

您可以設置pointer-events: none，使其不可點擊（請點擊通過）：

a:before { 
 
    content: "nope "; 
 
    pointer-events: none; 
 
    
 
    /* to make it look "normal" */ 
 
    color: black; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
}

<a href="javascript:alert('click');">test</a>