Li Mouseover/Hover Text Block

Question

Ich versuche, eine reaktionsschnelle mouseover so zu bekommen, aber leider schafft es eine große Kiste. Was ist hier falsch? Das Puzzle sollte auch zentriert sein, ich weiß auch nicht wie. Versucht so viel -.-

#mouseover1:hover:after { 
 
    content: "mehr erfahren!"; 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    left: 50px; right: 0; 
 
    color: white; 
 
    font-size: 100%; 
 
    font-weight: bold; 
 
    line-height: 110%; 
 
    background: RGBA(0, 51, 204, .5); 
 
    border: 1px solid blue; 
 
    display:flex; 
 
    align-items: center; /* Vertical center alignment */ 
 
    text-align: center; 
 
    justify-content: center; 
 
}

<ul style="list-style-image: url('http://compliance-sichern.de/wp-content/uploads/2016/07/puzzle-li.gif');"> 
 
    <li id="mouseover1">Test 1</li> 
 
    <li id="mouseover2">Test 2</li> 
 
    <li id="mouseover3">Test 3</li> 
 
</ul>

Answer 1

Versuchen Sie, diese

#mouseover1:hover:after { 
 
    content: "mehr erfahren!"; 
 
    position: absolute; 
 
    top: 0; bottom: 0; 
 
    left: 120px; right: 0; 
 
    color: white; 
 
    width:40%; 
 
    height:35%; 
 
    font-size: 100%; 
 
    font-weight: bold; 
 
    line-height: 110%; 
 
    background: RGBA(0, 51, 204, .5); 
 
    border: 1px solid blue; 
 
    display:flex; 
 
    align-items: center; /* Vertical center alignment */ 
 
    text-align: center; 
 
    justify-content: center; 
 
} 
 
#mouseover1:hover:before { 
 
    content:""; 
 
    width: 0; 
 
    height: 0; 
 
    position:absolute; 
 
    left:80px; 
 
    top:5px; 
 
    border-top: 25px solid transparent; 
 
    border-right: 40px solid RGBA(0, 51, 204, .5); 
 
    border-bottom: 25px solid transparent; 
 
    }

<ul style="list-style-image: url('http://compliance-sichern.de/wp-content/uploads/2016/07/puzzle-li.gif');"> 
 
    <li id="mouseover1">Test 1</li> 
 
    <li id="mouseover2">Test 2</li> 
 
    <li id="mouseover3">Test 3</li> 
 
</ul>

this helps ...