子比主题 – 文本超链接美化样式
给子比主题加一个文本超链接的美化样式,我这里可能是有一些小小的问题,但是不影响使用,我留个文章当作备份一下这个代码,省的再去找,话不多说直接看演示吧!代码部署
丢到:子比主题–>>自定义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(),.wp-block-list a:not() {
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():hover,.wp-block-list a:not():hover {
color: #fff;
background-position-x: 0;
background-size: 100% 100%
}
.wp-posts-content a:not():before,.wp-block-list a:not():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():hover:before,.wp-block-list a:not():hover:before {
background: #fff;
color: var(--focus-color);
rotate: 45deg;
scale: .9
}
页:
[1]