html - 当用户在价格计划上按住鼠标时在 CSS 中设置 "text content"

Question

我用 CSS 和 HTML 创建了一个带有叠加效果的价格计划。现在，我想在用户悬停其中一个计划时添加一个文本内容，它应该说“选择这个计划”。我尝试在 .green:after 上添加一个“content”变量并且它有效，但我不知道如何将它对齐到最中间。

我应该如何进行？

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

Answer 1

您应该添加到您的 .green:after - text-align: center 以水平对齐文本，并添加 padding-top 使其在内部在你的 block 中 margin 。

例如:

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