html - :before pseudoelement not showing up

Question

我无法获得 :before要显示的伪元素。我想在 <h2> 后面创建一个形状有问题的元素。

http://jsfiddle.net/cbeLanvb/2/

<div id="container">
<h2 id="info_text_startday_explain">turmas começam</h2>
<h1 id="info_text_startday">10 de Maio</h1>
</div>

CSS

#container{
height: auto;
width: 300px;
background-color: red;
}

#info_text_startday_explain{
display: inline-block;
width: 100%;
text-align: center;
margin: 0 auto;
font-size: 2em;
color: black;
}
#info_text_startday{
position: relative;
z-index: 3;
color: white;
font-size: 2.8em;
}

#info_text_starday:before{
position: absolute;
content: '';
z-index: 2;
background-color: black;
border: 3px solid white;
height: 300px;
width: 290px;   
}

Answer 1

您的 CSS 中有错别字..

div 的 id 是 info_text_startday 并且在你的 css 中你有 #info_text_starday:before

所以在你的CSS中替换为

#info_text_startday:before{
position: absolute;
content: '';
z-index: 2;
background-color: black;
border: 3px solid white;
height: 300px;
width: 290px;   
}

参见 fiddle