li mouseover/hover text block

Question

Я пытаюсь получить отзывчивое наведение мыши, как это, но, к сожалению, он создает большую коробку. Что здесь не так? Головоломка также должна быть сосредоточена, я также не знаю, как это сделать. Пробовал так -.-

#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

Попробуйте

#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>

Надеется, что это помогает ...