JSFiddle - React, Tailwind, and code Playground

by olivier royo

HTML

<div class="gvb-theme-carosuleTooltipMargin">
<div class="gvb-theme-cpCaroToolTipList">
<a href="#">
<img src="http://olivier.royo.free.fr/css/img/pique.png" class="gvb-theme-cpSetStarIcon" > <span>CONTO LA LIBRETTA LIBRETTA</span>
</a>
</div>
</div>

CSS

body {
   color: #000;
  padding: 50px;
  margin: 0;
  font-size:18px;
}
.gvb-theme-cpSetStarIcon{
  width:50px;
}
.gvb-theme-cpCaroToolTipList {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 150px;
}

.gvb-theme-cpCaroToolTipList a {
    color: #003c72;
    line-height: 30px;
    padding: 5px 10px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gvb-theme-cpCaroToolTipList a:hover {
    color:#ffffff;
    text-align:center;
    background-color:#003C72;
    width:150px;
    padding:5px 10px;
}

.gvb-theme-cpCaroToolTipList:hover {
   color:#ffffff;
}

.gvb-theme-cpCaroToolTipList:hover > span{
    color:#ffffff;
}