Как изменить подчеркивание ссылок. Анимация свойства: text-decoration: underline

Подробно объяснять не буду, там не просто, потому что ко всем ссылкам разом добавляется эффект и иногда он вообще не подходит или ломает все. Дам коды, если разберетесь, хорошо, нет то нет.

Я это придумал и прилично напрягся, чтобы это имело хоть какую-то форму. Есть моменты, которые мне не нравятся и исправить которые видимо никак нельзя, так чтобы это было универсально. Но костыли наше все

Вот JS:

// a hover effect ----------------------
jQuery(document).ready(function($) {

	// добавим классы элементов внутри которых не нужно обрабатывать
	var findIn      = '.wrapper',
		skipFindIn  = '.h_add_question, [class*=nav], [class*=menu]',
		skipIfHas   = '[class*=btn], [class*=button]',
		skipIfHasInside = 'img, svg, p, div, :before, :after, .btn, .button',
		isIE = function(){
			var ua = window.navigator.userAgent;
			var msie = ua.indexOf("MSIE ");
			//return ua;
			// If Internet Explorer, return version number
			if( msie > 0 || !!navigator.userAgent.match(/Trident.*rv:11./) )
				return true;
			else
				return false;
		}();

	// ничего не делаем для IE
	if( isIE ) return;

	$.fn.addAHov = function(){
		return this.each(function(){
			var $the = $(this),
				disp = $the.css('display'),
				text = $the.text();

			//console.log( $the.fi, $the[0] );

			// пропускаем
			if(
				$the.css('text-decoration') == 'underline' || // если стиль underline
				text.match(/^[0-9+]$/) || // если текст число
				$the.find( skipIfHasInside ).first().length || // если в A есть элементы
				$the.is( skipIfHas ) || // если у A есть классы
				false // easy life
			  )
				return;

			if( disp == 'block' || disp == 'inline-block' || disp == 'table' || disp == 'table-cell' ){
				$the.wrapInner('<foo class="ahwrap"></foo>');
				$the.addClass('a_block__hov');
			}
			else
				$the.addClass('a__hov');
		});
	};

	// добавим класс a__hov_no к исключеням
	$( skipFindIn ).addClass('a__hov_no');

	$( findIn ).find('a').not('.a__hov_no, .a__hov_no a').addAHov();

});

А это css (SASS):

@charset "UTF-8";

// a hover effect ----------------------
%a__hov_after{
	content: '\2588'; // для цвета ▉ - 2588
	line-height: 0;
	font-size: 999em;
	color:inherit;
	overflow: hidden;
	font-style: normal;
	display: block;
	position: absolute;
	height: 1px;
	width: 100%;
	left: 0;
	bottom: 0em;
	visibility: hidden;
	transition: all 150ms ease;
	transform: scaleX(0);
}
%a__hov_hover_after{
	visibility: visible;
	transform: scaleX(1);
}

//.a__hov a:not(.button):not(.btn):not(.a__hov_none),
.a__hov{ position: relative;
	&:hover{ text-decoration:none !important; } // сброс

	&:after{ @extend %a__hov_after; }
	&:hover:after{ @extend %a__hov_hover_after; }

	&.h__top:after{
		top: -1px;
		bottom:auto;
	}
}

// для ссылок со свойством display: block их текст оборачивается в span отдельно
//.a_block__hov a:not(.button):not(.btn):not(.a__hov_none),
.a_block__hov{
	&:hover{ text-decoration:none !important; } // сброс

	& > .ahwrap{ position: relative; }
	& > .ahwrap:after{ @extend %a__hov_after; }
	&:hover > .ahwrap:after{ @extend %a__hov_hover_after; }
}

// очищает наведение на ссылку
.a__hov_none a:after{ content: none !important; }

Sass можете скомпилировать, чтобы посмотреть что получается. В сети есть онлайн компиляторы...

Подключите js и стили, и уже должно работать. Возможно нужно будет настроить исключения в js...

П.С. Вообще, это, не побоюсь этого слова, засерание DOM чем-то ненужным - красота требует жертв