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

set font-size for appended text only

本文关键字：字体 设置 文本      更新时间：2023-09-26

当前一个链接的描述如下：

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

现在，我将在描述后添加文本：

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

如何仅对附加文本使用字体大小？

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

出于某种原因，我不想用span包装附加文本。

我对regex了解不多，但希望这可以用regex完成。

您可以尝试使用: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

使用类似的东西

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

FIDDLE

注意：没有额外的元素

您需要将添加的字符包装在元素中，以便在其上设置样式。这可以通过多种方式实现，例如

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

相关文章：