CSS选择器不工作

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

我想要的文字，但效果之前添加边框没有显示出来

我使用::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>

来源

2017-02-21 Maddy plus plus

您忘记加上'内容： ''' –

是，@NenadVracar是正确的，它添加到'.container :: before'声明 –

除非指定应该如何显示::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>

来源

2017-02-21 13:43:23 Quentin

为什么'内容：” ... “;'和'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>

来源

2017-02-21 13:59:41 xfactor11

CSS选择器不工作

回答

相关问题