用户在价格计划上按住鼠标时，在CSS中设置“文本内容”

Question

我用CSS和HTML创建了一个具有叠加效果的价格计划。现在，我想在用户悬停其中一个计划时添加文本内容，并且应该说“选择此计划”。我试过在.green:after上添加一个“内容”变量并且它有效，但我无法弄清楚如何将它与中间对齐。

我该怎么办？

http://codepen.io/anon/pen/wabMgo

Answer 1

您应该添加到.green:after - text-align: center以水平对齐文本和padding-top以在块中创建内边距。

例如：

.overlay:after {
  position: absolute;
  content:"Money";
  top:0;
  left:0;
  text-align: center;
  padding-top: 65px;
  width:100%;
  height:100%;
  opacity:0;
}