Css ：psuedo元件未在h1标签上工作之前
我无法使用：before伪类在包含H1标记的div之前插入图标字体。我在网上看到的所有示例都使用p或I来插入，但是我想使用H1标记，因为每个标记都有一个单独的ID和类，对应于一些animate.css淡入淡出和延迟效果 为了简单起见，在下面的示例中，我用哈希符号替换了字体图标。这个想法是图标字体将出现在div之前，而不是每个h1标签，换句话说，我可以这样做；四行文字和一个图标字体。我觉得这与display属性或nested/child有关，但完全不知道如何修复。非常感谢您的帮助Css ：psuedo元件未在h1标签上工作之前,css,icons,pseudo-element,pseudo-class,Css,Icons,Pseudo Element,Pseudo Class,我无法使用：before伪类在包含H1标记的div之前插入图标字体。我在网上看到的所有示例都使用p或I来插入，但是我想使用H1标记，因为每个标记都有一个单独的ID和类，对应于一些animate.css淡入淡出和延迟效果 为了简单起见，在下面的示例中，我用哈希符号替换了字体图标。这个想法是图标字体将出现在div之前，而不是每个h1标签，换句话说，我可以这样做；四行文字和一个图标字体。我觉得这与display属性或nested/child有关，但完全不知道如何修复。非常感谢您的帮助 <!DOC
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#wrapper {
max-width: 800px;
margin:0 auto;
background-color: rgb(201, 238, 219);
}
.theLines {
width: 300px;
border: solid 1px black;
padding: 20px;
}
.theLines:before{
font-family: ;
content: "#";
color:red;
font-size:3em;
border: solid 1px red;
}
</style>
</head>
<body id="wrapper" class="">
<div id="container">
<div class="theLines">
<h1>Line 1</h1>
<h1>Line 2</h1>
<h1>Line 3</h1>
<h1>Line 4</h1>
</div>
</div>
</body>
</html>
一种解决方案是使用相对于容器的定位来实现这一点： CSS
嗯，上面的内容在JSFIDLE上似乎很好：我试图让它出现在前面，比如这个例子@user3324665，那么你应该在h1上使用：before。但是如果我在h1上使用：before，那么我会得到四个图标——我只想要一个图标，四个h1。请注意，在同一页面上使用多个标签对于SEO来说不是一个好的做法。尝试在页面上只做一个，同时避免在页面内部使用属性和标记，否则您可以删除display:inline块；在这种情况下，显示器的计算值会被阻塞，因此非常安全。谢谢-非常感谢！
<div id="container">
<div class="theLines">
<h1>Line 1</h1>
<h1>Line 2</h1>
<h1>Line 3</h1>
<h1>Line 4</h1>
</div>
</div>
#wrapper {
max-width: 800px;
margin:0 auto;
background-color: rgb(201, 238, 219);
}
#container {
position:relative; /* <-- set 'base' positioning */
}
.theLines {
width: 300px;
border: solid 1px black;
padding: 20px;
margin-left:40px; /* <-- move away from left side of #container */
}
.theLines:before {
content:"#";
color:red;
font-size:3em;
border: solid 1px red;
position:absolute; /* allow for adjacent positioning relative to other children of #container */
left:0; /* position on left hand side of #container */
display:inline-block;
}