我正在创建悬停效果
所以我有简单的文本主页,背景颜色是紫色
我想在文字前添加边框,但效果不明显
我正在为此使用 ::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>
最佳答案
::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>
关于html - 选择器之前的 CSS 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42368927/