<a class="link" href="#">
<div class="underline">
</div>
ОСНОВНОЙ САЙТ
</a>
<a class="link" href="#">
<div class="underline">
</div>
ЭТО ОЧЕНЬ ДЛИННАЯ ССЫЛКА
</a>
* {
padding: 0;
margin: 0;
}
.link {
display: inline-block;
font-weight: bold;
text-decoration: none;
padding: 20px;
color: green;
}
.link .underline {
margin: -10px;
position: fixed;
overflow: hidden;
margin-top: 0.9em;
}
svg {
width: 400px;
}
.underline svg path {
transition: stroke-dashoffset 0s;
}
.link:hover svg path {
stroke-dashoffset: 0;
transition: stroke-dashoffset 2s linear;
}
[document.querySelectorAll('.underline')].forEach(
(el) => {
el.innerHTML = `<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 307.59644 9.0504971"
>
<path
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-dasharray="350 350"
stroke-dashoffset="350"
stroke-opacity="1"
d="M 0.02817361,4.0412392 C 7.7792816,3.1503062 15.530097,2.2594072 20.441115,1.8780132 c 4.911018,-0.3813941 6.982434,-0.253322 7.84822,0.205879 0.865786,0.459202 0.526198,1.249718 1.102674,1.656433 0.576476,0.406715 2.068435,0.428984 4.276217,0.147761 2.207783,-0.281222 5.131038,-0.865873 8.196095,-1.06908 3.065057,-0.203208 6.272616,-0.02501 8.143371,0.286791 1.870754,0.311801 2.405335,0.757284 2.544618,1.158326 0.139284,0.401041 -0.09549,0.728189 0.333511,0.86783 0.428997,0.139642 1.53046,0.0767 5.939212,-0.348428 4.408751,-0.425131 12.127716,-1.21278 16.490147,-1.559234 4.362431,-0.346454 5.370404,-0.251956 5.653884,0.346205 0.28348,0.598162 -0.157596,1.700852 -0.283641,2.378234 -0.126046,0.677381 0.06289,0.929294 0.708848,1.00804 0.64596,0.07874 1.748207,-0.01573 5.243737,-0.692799 3.495529,-0.677065 9.387179,-1.937311 13.040967,-2.613468 3.653775,-0.676158 5.134125,-0.772703 6.189175,-0.693947 1.05505,0.07876 1.71664,0.33079 2.126,0.75583 0.40937,0.425041 0.56689,1.023632 0.76881,1.584641 0.20191,0.561009 0.45953,1.108454 0.8692,1.42352 0.40967,0.315065 0.97651,0.409539 2.0157,0.330799 1.0392,-0.07874 2.55167,-0.33082 4.48857,-0.787494 1.9369,-0.456675 4.29972,-1.118264 6.94536,-1.795419 2.64564,-0.677154 5.57534,-1.370202 7.7801,-1.716643 2.20476,-0.346442 3.68532,-0.346442 4.89619,-0.17138 1.21086,0.175063 2.15264,0.525262 2.43974,0.950721 0.28709,0.425459 -0.0806,0.926885 -0.44811,1.428015 -0.49125,0.629305 -0.98179,1.257696 -0.46511,1.446582 0.51669,0.188886 2.03872,-0.06301 4.17032,-0.409521 2.1316,-0.346507 4.87258,-0.787584 10.11815,-1.453512 5.24557,-0.665929 12.99638,-1.556827 17.90739,-1.938221 4.91102,-0.381395 6.98244,-0.253323 7.84823,0.205879 0.86578,0.459202 0.5262,1.249719 1.10267,1.656433 0.57648,0.406714 2.06844,0.428983 4.27622,0.14776 2.20778,-0.281222 5.13104,-0.865874 8.1961,-1.069081 3.06505,-0.203207 6.27261,-0.02501 8.14337,0.286792 1.87075,0.311801 2.40533,0.757286 2.54461,1.158325 0.13929,0.401038 -0.0955,0.728189 0.33351,0.867831 0.429,0.139642 1.53046,0.0767 5.93921,-0.348428 4.40875,-0.42513 12.12772,-1.21278 16.49015,-1.559234 4.36243,-0.346454 5.3704,-0.251957 5.65389,0.346206 0.28348,0.598162 -0.1576,1.70085 -0.28364,2.378233 -0.12605,0.677384 0.0629,0.929294 0.70884,1.00804 0.64596,0.07874 1.74821,-0.01573 5.24374,-0.692799 3.49553,-0.677066 9.38718,-1.937311 13.04097,-2.613469 3.65378,-0.676157 5.13413,-0.772702 6.18918,-0.693946 1.05505,0.07876 1.71664,0.33079 2.126,0.75583 0.40937,0.425041 0.56689,1.023632 0.76881,1.584641 0.20191,0.561009 0.45953,1.108454 0.8692,1.42352 0.40967,0.315065 0.97651,0.409539 2.0157,0.330799 1.0392,-0.07874 2.55167,-0.33082 4.48857,-0.787494 1.9369,-0.456675 4.29972,-1.118264 6.94536,-1.795419 2.64564,-0.677154 5.57534,-1.370202 7.7801,-1.716643 2.20476,-0.346442 3.68532,-0.346442 4.89619,-0.17138 1.21086,0.175063 2.15264,0.525262 2.43974,0.950721 0.28709,0.425459 -0.0806,0.926885 -0.44811,1.428015 -0.49125,0.629305 -0.98179,1.257696 -0.46511,1.446582 0.51669,0.188886 2.03872,-0.06301 4.17032,-0.409521 2.1316,-0.346507 4.87258,-0.787584 7.3923,-1.260036 2.51972,-0.472452 4.81933,-0.976476 6.32288,-1.366958 1.50355,-0.390483 2.24472,-0.680507 2.96886,-0.963865"
</svg>`;
el.style.width = (el.parentElement.offsetWidth - 20) + 'px';
console.log(el.parentElement, el.parentElement.offsetWidth);
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.