Question

I’ve got some strange behaviour with the following:
Html

<article class="feature">
  <div class="feature-media">
    <img src="image.jpg" alt="Article Feature media">
  </div>
  <h2>Secondary Title</h2>
  <p>lorum</p>
</article

Css

.feature h2:before {
  content: ""  
  float: left;
  display: block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background-color: #df6c4f;
}

.left-main .feature {
  padding: 0 10px;
}

.left-main .feature-media {
  float: left;
  margin-right: 20px;
}

Nothing complicated but the H2 tag takes the width of the article and ignores the div to the left. This means that my :before element is hidden behind the image. I’ve floated all the H2 and the pseudo element which didn’t change anything.

Thanks

IMage:
screenshot http://stage.whenthemusicstops.com/screen.png

Answer 1

I’ve create a fiddle and it seems to work alright (tested in Chrome).

The only thing I noticed is that you are missing a semicolon after content: “” and I had to remove the .left-main prefix.

.feature h2:before {
    content:"";
    float: left;
    display: block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    background-color: #df6c4f;
}
.feature {
    padding: 0 10px;
}
.feature-media {
    float: left;
    margin-right: 20px;
}