set the font size for added text only


Currently a link have the description like this:

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

Now, I would append text after the description:


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

//        ^^^ setting font-size for this only
// this won't work

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>
<a class="marked" href="#">description</a>

Reference: Hex codes for entities can be found at: