テキストリンク下線バリエーション

<div class="d08-03-04-list">
          <a href="#" class="d08-03-04-a d08-03-04-1">中央から広がる</a>
          <a href="#" class="d08-03-04-a d08-03-04-2">左から伸びる</a>
          <a href="#" class="d08-03-04-a d08-03-04-3">波打つ下線</a>
          <a href="#" class="d08-03-04-a d08-03-04-4">スワイプ塗り</a>
        </div>

.d08-03-04-list{display:flex;flex-direction:column;gap:18px;font-size:15px;font-weight:600}
        .d08-03-04-a{color:#2a2d3a;text-decoration:none;position:relative;width:fit-content;padding-bottom:3px}
        .d08-03-04-a::after{content:"";position:absolute;left:0;bottom:0;height:2px;background:#6a5cff;width:100%;transform:scaleX(0);transition:transform .3s ease}
        .d08-03-04-1::after{transform-origin:center}
        .d08-03-04-1:hover::after{transform:scaleX(1)}
        .d08-03-04-2::after{transform-origin:left}
        .d08-03-04-2:hover::after{transform:scaleX(1)}
        .d08-03-04-3::after{height:6px;background:none;border-bottom:2px solid #6a5cff;border-radius:0;transform:none;background-image:repeating-linear-gradient(90deg,#6a5cff 0 4px,transparent 4px 8px);background-size:8px 2px;background-repeat:repeat-x;background-position:0 100%;border:none;opacity:0;transition:opacity .3s}
        .d08-03-04-3:hover::after{opacity:1;animation:d08-03-04-wave 1s linear infinite}
        @keyframes d08-03-04-wave{to{background-position:16px 100%}}
        .d08-03-04-4{overflow:hidden}
        .d08-03-04-4::after{transform-origin:right;height:100%;background:#6a5cff;opacity:.12;z-index:-1}
        .d08-03-04-4:hover::after{transform-origin:left;transform:scaleX(1)}