html - 标题自定义

Question

有没有办法自定义标题？我希望它有一个红色的背景，但我没有看到任何方法来做到这一点。如果有一种简单的方法可以做到这一点，那就太好了！

.box {
  background-color: red;
  height: 50px;
  width: 50px;
  text-align: center;
}

<div title="Hi!" class="box">Hi!</div>

标签： htmlcss

Answer 1

您可以添加伪元素并在悬停时显示它。

例子

.box {
  background-color: red;
  height: 50px;
  width: 50px;
  text-align: center;
  position: relative;
}

.box:before {
  content: "Hi!";
  display: none;
  position: absolute;
  right: -30px;
  width: 50px;
  height: 20px;
  background: blue;
}

.box:hover:before {
  display: block;
}

<div class="box">Hi!</div>