Question

有简单的悬停类：

＆＃13;

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

＆＃13;

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

＆＃13;

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

了解更多详情

点击这里

TNX， P

Answer 1

您可以点击此处after伪，并为两者提供固定的底部位置

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

设置：before到固定的，添加

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

悬停：在设置两行内容之前？

2 个答案: