設置僅用於附加文本的字體大小

Question

當前，鏈接的描述如下：

<a href="#">description</a>

現在，我將在描述后添加文本：

$('a').append('>')

如何僅將字體大小用於附加文本？

description>
//        ^^^ setting font-size for this only
// this won't work
 $('a').append('>').css('font-size','20px')

由於某些原因，我不想用span包裹附加的文本。

我對正則表達式了解不多，但希望可以使用正則表達式來完成。

Answer 1

你可以嘗試使用:after偽元素，但額外的內容將是鏈接文本的一部分，而不是出現后馬上關閉的a標簽。

如果關閉文本裝飾，則可以使用此設計模式。

然后，您可以使用jQuery將“標記”類添加或切換到適當的鏈接。

 a { text-decoration: none; transition: background-color 1s ease-in-out; } a:hover { background-color: lightblue; } a.marked:after { /* content: '>'; this also works... */ content: '\\3e'; /* '3e' is the hex code for the > symbol */ font-size: 2.0em; margin-left: 10px; vertical-align: middle; } 

 <a href="#">description</a> <br><br> <a class="marked" href="#">description</a> 

參考：實體的十六進制代碼可在以下位置找到：

http://www.fileformat.info/info/unicode/char/3e/index.htm

Answer 2

使用類似

$('a').append('<font size="10">&gt;</font>');

小提琴

注意：您不能沒有額外的元素

Answer 3

您需要將添加的字符包裝在元素中，以便可以在其上設置樣式。 這可以通過多種方式完成，例如

 $('a').append('<span style="font-size: 20px">></span>'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="#">description</a>