：在psuedo元素不能在h1标签上工作之前 [英] :before psuedo element not working on h1 tag
问题描述
我无法得到：在伪类之前在包含H1标签的div之前插入图标字体。我在网上看到的所有例子都使用ap或i来插入，但是我想使用H1标签，因为每个标签都有一个单独的ID和类，对应一些animate.css淡入淡出和延迟效果。
I cannot get the :before pseudo class to insert an icon font before a div containing H1 tags. All the examples I see online use a p or i to insert, however I want to use H1 tags because each tag will have a separate ID and class that correspond to some animate.css fade and delay effect.
为简单起见，我在下面的示例中用哈希符号替换了字体图标。想法是图标字体将出现在div之前，而不是每个h1标签（我可以这样做） - 换句话说;四行文字和一个图标字体。我的感觉是这与显示属性或嵌套/子项有关，但完全失去了如何修复。任何帮助非常感谢。
For simplicity sake I have replaced the font icon with a hash symbol in the example below. The idea is the icon-font will appear before the div, not each h1 tag (this I can do) - in other words; four lines of text and one icon font. My feeling is this something to do with the display property or nested/ child, but at a complete loss how to fix. Any help much appreciated.
<!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>
推荐答案
一种解决方案是使用相对于<$ c的定位$ c> #container 实现此目的：
One solution is to use positioning relative to #container to achieve this:
<div id="container">
<div class="theLines">
<h1>Line 1</h1>
<h1>Line 2</h1>
<h1>Line 3</h1>
<h1>Line 4</h1>
</div>
</div>
CSS
#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;
}
这篇关于：在psuedo元素不能在h1标签上工作之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
