JSFiddle - React, Tailwind, and code Playground

HTML

<div class="pane" style="display: block;">
    <ul class="recent-posts">            
            <li class="recent-post">
                <h3><a href="http://xxxx">Titre 1</a></h3>
                <p class="recent-meta"></p>
                <div class="excerpt"><a href="http://xxxx">Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et <span class="recent-read-more">...</span></a></div>
            </li>
            <li class="recent-post">
                <h3><a href="http://xxxx">Titre 2</a></h3>
                <p class="recent-meta"></p>
                <div class="excerpt"><a href="http://xxxx">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat <span class="recent-read-more">...</span></a></div>
            </li>            
    </ul>
</div>

CSS

a { text-decoration: none; color: inherit; }


/* ou si contenu est fils de .titre    */  
.recent-post:hover {
    background-color:cyan;
    border: 3px solid yellow;
}

.recent-post:hover > .excerpt {
    background-color:red;
    border: 3px solid green;
}