飞流 发表于 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(),.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]
查看完整版本: 子比主题 – 文本超链接美化样式