set the font size for added text only

advertisements

Currently a link have the description like this:

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

Now, I would append text after the description:

$('a').append('&gt;')

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

description>
//        ^^^ setting font-size for this only
// this won't work
 $('a').append('&gt;').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.


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