JSFiddle - React, Tailwind, and code Playground
HTML
<h1 class="slide-title">
<span class="slider-category">
<a href="/test/test.html"> Blocking irritating text</a>
</span>
Hong Kong Trip Nov 2015 – Day 3 Itinerary
</h1>
CSS
h1.slide-title:hover .extra-txt {
text-decoration: underline;
}
h1.slide-title a {
text-decoration: none;
}
h1.slide-title:hover a {
text-decoration: none !important;
}
JavaScript
$('.slide-title').each(function() {
var txt = $(this).find(".slider-category").html();
$(this).find("span").remove();
var ex = $(this).text();
$(this).empty();
$(txt+"<span class='extra-txt'>"+ex+"</span>").appendTo(this);
});