Test-hover-pfeil

HTML

<ul class="no"
<a class="link-dunkel" href="https:">
<li class="hover-readmore-sub">
 <strong>üBERSCHRIFT</strong>
 <p class="more-sub-no">Kurzer text<br></p>
 <div class="read-more-sub"><span class="more-sub-icon"> → </span></div>
</li>
</a>
 
<li class="hover-readmore-sub">
 <strong>üBERSCHRIFT</strong>
 <p class="more-sub-no">Kurzer text<br></p>
 <div class="read-more-sub"><span class="more-sub-icon"> → </span></div>
</li>
</a>

<li class="hover-readmore-sub">
 <strong>üBERSCHRIFT</strong>
 <p class="more-sub-no">Kurzer text<br></p>
 <div class="read-more-sub"><span class="more-sub-icon"> → </span></div>
</li>
</a>

</ul>

CSS

a.link-dunkel {
    color: #0e2443 !important;
}
ul.no {
    list-style: none !important;
}
.read-more-sub {
    width: 100%;
    border-top: 1px;
    border-color: #235ab0;
    border-style: solid;
	margin-bottom: 28px !important;
}
span.more-sub-icon {
    float: right;
    background-color: #235ab0;
    color: white !important;
    padding: 0 7px 4px;
}
span.more-sub-icon:hover {
    background-color: #0e2443; 
    color: red !important;
}


li.hover-readmore-sub:hover {
    background-color: #eaeaea;
}
p.more-sub-no {
    margin-bottom: 0px !important;
    width: 100%;
   font-size: 13px;
    font-style: normal;
	    font-weight: normal;
    
}