[Solved] :before psuedo element not working on h1 tag

by


One solution is to use positioning relative to #container to achieve this:

Demo Fiddle

<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;
 }

2

solved :before psuedo element not working on h1 tag