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.
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>
One solution is to use positioning relative to
#containerto achieve this:Demo Fiddle
CSS