set font-size for appended text only

Question

Currently a link have the description like this:

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

Now, I would append text after the description:

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

How can I use the font-size for appended text only?

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

I wouldn't like to wrap appended text with span for some reason.

I don't know much more about regex but hope this can be done with regex.

Answer 1

You could try using the :after pseudo-element, but the extra content will be part of the link text instead of appearing right after the closing a tag.

If you turn off the text-decoration, you may be make do with this design pattern.

You can then use your jQuery to add or toggle the class "marked" to the appropriate links.

 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> 

Reference: Hex codes for entities can be found at:

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

Answer 2

Use something like,

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

FIDDLE

Note: You can't do without an extra element

Answer 3

You need to wrap the added character in an element so that you can set styles on it. This can be done in several ways, eg

 $('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>