时间戳

首页 > 解决方案 > 居中 ::before 1 个位置的列表内容

css - 居中 ::before 1 个位置的列表内容

问题描述

我有一个无序列表，我将其设置为导航，该导航的主要思想是，每当我将鼠标悬停在其中一个按钮上时，该按钮的内容文本就会出现在后台，使用伪元素:: before + ：现在悬停问题是，每次我将鼠标悬停在按钮上时，之前显示的内容元素（attr）相对于不在背景中心的按钮，有人可以查看我提供的代码并给我一些解决方案.. 当我悬停时，我希望显示在背景中的文本在我悬停的每个按钮中居中。

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

body {
  background-color: #161616;
  font-size: 14px;
}

.nagivation {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.nagivation ul li {
  position: relative;
  list-style: none;
  font-size: 3rem;
  padding: 0.1em 0.5em;
  margin: 0.5em;
  transition: all 0.2s;
  border-radius: 5px;
}
.nagivation ul li:hover {
  background-color: #fff;
}
.nagivation ul li a {
  color: #ffffff;
  text-decoration: none;
}
.nagivation ul:hover li a {
  color: #5c5b5b;
}
.nagivation ul li:hover a {
  color: black;
}
.nagivation ul li a:before {
  content: " ";
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5em;
  color: rgba(255, 254, 254, 0.1);
  z-index: -1;
  opacity: 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 500px;
  transition: all 0.5s, left 0.5s;
  border: 1px solid red;
}
.nagivation ul li a:hover:before {
  content: attr(data-text);
  position: absolute;
  opacity: 1;
  top: 50%;
  left: 50%;
  letter-spacing: 10px;
}/*# sourceMappingURL=style.css.map */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="nagivation">
        <ul>
            <li><a href="#" data-text="Home">Home</a></li>
            <li><a href="#" data-text="About">About</a></li>
            <li><a href="#" data-text="Services">Services</a></li>
            <li><a href="#" data-text="Work">Work</a></li>
            <li><a href="#" data-text="Team">Team</a></li>
            <li><a href="#" data-text="Contact">Contact</a></li>
        </ul>
    </div>

</body>
<script src="./index.js"></script>
</html>

标签： css

解决方案

position: absolute相对于它们最近的定位祖先定位元素。在这种情况下，这恰好是li已设置的元素position: relative。

如果你想相对于包含的 div 定位，你应该设置 position: relative 到那个div而不是li元素；

推荐阅读