Question

目前，链接的描述如下：

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

现在，我会在描述后附加文字：

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

如何仅为附加文本使用font-size？

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

Answer 2

使用类似的东西，

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

<强> FIDDLE

注意：你不能没有额外的元素

Answer 3

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

＆＃13;

$('a').append('<span style="font-size: 20px">></span>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">description</a>

＆＃13;

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

3 个答案: