javascript - 仅为附加文本设置字体大小

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