如何在 CSS 中的悬停效果上方显示我的文本？答案

【问题标题】：How can I show my text above my hover effect in CSS?如何在 CSS 中的悬停效果上方显示我的文本？
【发布时间】：2020-07-09 16:30:38
【问题描述】：

我正在尝试创建悬停效果，但文本未显示在 :before 类上方。

这是项目https://codepen.io/designextras/pen/WNrJdbR的codepen

我不确定我需要进行什么编辑才能显示上面的文本，因为按钮文本我无法添加 z-index

这是css

.btn-2 {
  width: 300px;
  height: 100px;
  border: none; 
  color: black;
  border-radius: 4px;
  transition: 0.3s ease all;
  font-size: 2rem;
  letter-spacing: 4px;
  border: 3px solid #FF0072;
  border-radius: 4px;
  position: relative;
}

.btn-2:hover {
  color: #000;  
} 

.btn-2:before {
  transition: 0.5s all ease;
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  bottom: 0;
  opacity: 0;
  content: "";
  background-color: #FF0072;
  z-index: 1;
}

.btn-2:hover:before {
  transition: 0.5s all ease;
  left: 0;
  right: 0;
  opacity: 1;
 }

这里是html

 <button class="btn-2">HOVER</button>

【问题讨论】：

我无法打开你的 codepan 项目
你的意思是你不能打开codepen？该链接在我的两个浏览器上都可以正常工作
我打开它是我的互联网对不起兄弟
如果在需要添加 z-index 之前使用按钮背景会发生什么
您可以直接在codepen中编辑代码，这样您就可以准确地看到某些东西是否有效

标签： css

【解决方案1】：

尝试添加这个css代码：

.btn-2 {
  z-index: 1;
}

.btn-2:hover:before {
  z-index: -1;
}

【讨论】：

什么都不做
嘿，对不起，我忘记在悬停样式中添加减号，我更新了答案，请重试。
如果您认为我的回答解决了您的问题，您可以接受。
比我的解决方案更好，只是多出了两行

【解决方案2】：

html

<button class="btn-2"><span>HOVER</span></button>

css

        .btn-2 {
            width: 300px;
            height: 100px;
            border: none;
          color: black;
            border-radius: 4px;
            transition: 0.3s ease all;
            font-size: 2rem;
            letter-spacing: 4px;
            border: 3px solid #FF0072;
            border-radius: 4px;
            position: relative;

          }

          .btn-2:hover {
            color: #000;  
          } 

        .btn-2:before {
            transition: 0.5s all ease;
            position: absolute;
            top: 0;
            left: 50%;
            right: 50%;
            bottom: 0;
            opacity: 0;
            content: "";
            background-color: #FF0072;
            z-index: 1;
          }

          .btn-2:hover:before {
            transition: 0.5s all ease;
            left: 0;
            right: 0;
            opacity: 1;

          }

.btn-2 span { 
  color: orange;
  z-index: 3;
  position: relative;
}

.btn-2:hover span {
  color: #000;
}

例如：

参考：https://codepen.io/nani554/pen/jOWxYmG

【讨论】：