[英]set font-size for appended text only
Currently a link have the description like this: 当前,链接的描述如下:
<a href="#">description</a>
Now, I would append text after the description: 现在,我将在描述后添加文本:
$('a').append('>')
How can I use the font-size for appended text only? 如何仅将字体大小用于附加文本?
description>
// ^^^ setting font-size for this only
// this won't work
$('a').append('>').css('font-size','20px')
I wouldn't like to wrap appended text with span for some reason. 由于某些原因,我不想用span包裹附加的文本。
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. 你可以尝试使用
:after
伪元素,但额外的内容将是链接文本的一部分,而不是出现后马上关闭的a
标签。
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. 然后,您可以使用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>
Reference: Hex codes for entities can be found at: 参考:实体的十六进制代码可在以下位置找到:
http://www.fileformat.info/info/unicode/char/3e/index.htm http://www.fileformat.info/info/unicode/char/3e/index.htm
You need to wrap the added character in an element so that you can set styles on it. 您需要将添加的字符包装在元素中,以便可以在其上设置样式。 This can be done in several ways, eg
这可以通过多种方式完成,例如
$('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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.