Hover: vor Inhalt in zwei Zeilen gesetzt?

Question

haben einfache Hover-Klasse:

.logos:hover:before { 
 
    content: "For more details click here"; 
 
    position: absolute; 
 
    color: #fff; 
 
    font-size: 18px; 
 
    bottom:10%; 
 
    left:5%; 
 
background: #000; 
 
}

<div class="logos"> Text </div>

Diese Arbeit fein, auf schweben Element, ich Text. Nun besteht die Möglichkeit, Text in der Linie wie folgt zu setzen:

Weitere Details

hier klicken

Tnx, P

Answer 1

Stellen Sie den: bevor eine feste mit, fügen

.logos:hover:before { 
width: 100px /* please insert the width you need for your problem*/ 
[ ... here are your other CSS-rules ] 
} 

Answer 2

Sie können hier in after Pseudo setzen klicken und fixiert geben untere Position für beide

.logos:hover:before { 
 
    content: "For more details"; 
 
    position: absolute; 
 
    color: #fff; 
 
    font-size: 18px; 
 
    bottom:40px; 
 
    left:5%; 
 
background: #000; 
 
} 
 

 
.logos:hover:after { 
 
    content: "click here"; 
 
    position: absolute; 
 
    color: #fff; 
 
    font-size: 18px; 
 
    bottom:10px; 
 
    left:5%; 
 
background: #000; 
 
}

<div class="logos"> Text </div>