悬停：在两行设置内容之前？ [复制]

Question

有简单的悬停类：

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

这很好，在悬停元素上，我看到了文字。现在，是否有可能像这样将文本放入行中：

更多详情

点击这里

Tnx, P

Answer 1

您可以在after 伪中放置click here，并为两者提供固定的底部位置

.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

将 :before 设置为固定的，添加

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