Question

我正在创建一个悬停效果

所以我有简单的文字回家，背景颜色是紫色

我想在文字前添加边框，但效果没有显示

我正在使用::before

以下是我的代码

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

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>

Answer 2

display：block将框放在文本之前;另外，为了让:: before选择器生成内容：“”;必须在里面添加文字。我目前隐藏了内容，以使框看起来是空的。

* {
  margin: 0;
  padding: 0;
}

.container::before {
  border: 2px solid black;
  content: ".";
  color: purple;
  display: block;
}

.container {
  background-color: purple;
  color: white;
  font-size: 50px;
  width: 300px;
  position: relative;
  top: 50px;
  left: 80px;
}

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

选择器不工作之前的CSS

2 个答案: