Hover :before set content in two lines?

Question

have simple hover class:

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

This work fine, on hover element, I see text. Now,is there possibility to put text in to line like this :

For more details

click here

Tnx, P

Answer 1

You can put click here in after pseudo and give fixed bottom position for both

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

Answer 2

Set the :before to a fixed with, add

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