选择器不工作之前的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>