查看: 87|回复: 0

[代码技巧] 子比主题 – 文本超链接美化样式

社区贡献

315 主题	190 回帖	1万积分

等级头衔

组别 : 管理员
Icon

等级 :

积分成就

钻石 : 524 颗

贡献 : 1849 点

金币 : 12 枚

在线时间 : 1298 小时
Icon

注册时间 : 2024-11-22
Icon

最后登录 : 2025-12-12

荣誉勋章

风云·优秀版主

飞流

1

FLLTCN发表于 2025-10-9 00:29:04 | 查看全部 |阅读模式浙江金华

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

您需要登录才可以下载或查看，没有账号？立即注册

×

给子比主题加一个文本超链接的美化样式，我这里可能是有一些小小的问题，但是不影响使用，我留个文章当作备份一下这个代码，省的再去找，话不多说直接看演示吧！

代码部署

丢到：子比主题–>>自定义CSS样式即可！

@font-face {
font-family: 'tengfei-font';
src: url('//at.alicdn.com/t/c/font_4823557_nwo4uyriby.woff2?t=1741491889382') format('woff2'),
url('//at.alicdn.com/t/c/font_4823557_nwo4uyriby.woff?t=1741491889382') format('woff'),
url('//at.alicdn.com/t/c/font_4823557_nwo4uyriby.ttf?t=1741491889382') format('truetype');
}
.wp-posts-content a:not([class]),.wp-block-list a:not([class]) {
color: var(--focus-color);
line-height: 1.15em;
padding: .1em .35em;
font-size: max(.75rem,.75em);
border-radius: 2em;
background: var(--focus-color-opacity1) linear-gradient(var(--focus-shadow-color) 0 0) no-repeat 100% 100%/0 100% border-box;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
transition: .7s cubic-bezier(.6,.1,0,1),background-position 0s;
word-break: break-all;
display: inline-flex;
align-items: center;
transform: translateY(-1.15px)
}
.wp-posts-content a:not([class]):hover,.wp-block-list a:not([class]):hover {
color: #fff;
background-position-x: 0;
background-size: 100% 100%
}
.wp-posts-content a:not([class]):before,.wp-block-list a:not([class]):before {
content: "\ec7f";
font-family: 'tengfei-font';
height: 1.15em;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
aspect-ratio: 1;
margin: 0 0 0 -.3em;
background: var(--focus-shadow-color);
border-radius: 50%;
color: #fff;
transition: inherit
}
.wp-posts-content a:not([class]):hover:before,.wp-block-list a:not([class]):hover:before {
background: #fff;
color: var(--focus-color);
rotate: 45deg;
scale: .9
}

复制代码

# 子比主题

本帖被以下淘专辑推荐:

子比主题|主题: 201, 订阅: 1

路虽远，行则将至；事虽难，做则必成。

使用道具举报

飞流广播+ 发布

	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	10-30 17:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	10-09 09:07
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-24 09:00
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-11 11:40
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	09-02 09:17
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-27 08:56
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-20 15:12
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	08-03 10:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	06-30 08:57
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	06-18 09:14
	系统消息：清风网络已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-11 09:40
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-10 09:31
	系统消息：IXM77777已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 13:44
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-09 09:22
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	04-09 08:52
	系统消息：清风网络已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-08 09:24
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	04-07 09:02
	系统消息：柒沐已经连续答对10道难题，逆天学霸谁与争锋？！#每日答题#	02-27 09:35
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-26 09:06
	系统消息：柒沐已经连续答对3道难题，逆天学霸谁与争锋？！#每日答题#	02-25 08:49

[代码技巧] 子比主题 – 文本超链接美化样式

资源无需等待，交易就趁现在，全面资源整合网络大咖云集，让你轻松玩转互联网！

代码部署

本帖被以下淘专辑推荐:

相关帖子

飞流广播+ 发布

会员LV.1

会员LV.2

会员LV.3

会员LV.4

会员LV.5

会员LV.6

会员LV.7

会员LV.8

会员LV.9

会员LV.10

关于我们

常用功能

服务引导

fl@fllt.cn