html - 选择器之前的 CSS 不起作用

Question

我正在创建悬停效果

所以我有简单的文本主页，背景颜色是紫色

我想在文字前添加边框，但效果不明显

我正在为此使用 ::before

以下是我的代码

* {
  margin: 0;
  padding: 0;
}

.container::before {
  border: 2px solid black;
}

.container {
  background-color: purple;
  color: white;
  font-size: 50px;
  width: 300px;
  position: relative;
  top: 50px;
  left: 80px;
}

<div class="container">HOME</div>

Answer 1

::before 伪元素不会被渲染，除非您指定它应该如何显示。

* {
  margin: 0;
  padding: 0;
}

.container::before {
  border: 2px solid black;
  display: block;
  content: "...";
}

.container {
  background-color: purple;
  color: white;
  font-size: 50px;
  width: 300px;
  position: relative;
  top: 50px;
  left: 80px;
}

<div class="container">HOME</div>

...但是文本前的边框听起来更像是左边框:

* {
  margin: 0;
  padding: 0;
}

.container {
  border-left: 2px solid black;
  background-color: purple;
  color: white;
  font-size: 50px;
  width: 300px;
  position: relative;
  top: 50px;
  left: 80px;
}

<div class="container">HOME</div>