Place a circle outside every <article> - html

Question

I have a liste of articles in my HTML code, I would like to place a circle to the left of every article. Which means that if there is a way to do it without having to manually place the circle next to every article that would be perfect.
The idea is to place the circle exactly where I've already place a vertical line (which is just basically a div with 100% height) so that it could create a sort of timeline effect.
Because the whole idea is to have this timeline (the line with each circles next to each article) and a year right next to the circle.
To make sure I was clear enough I've quickly made a picture on Photoshop of the result I have in mind. The grey circle is the same for every article, the white rectangle should be able to contain text.
Here's the HTML for the articles
<section class="content">
<article class="CV">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum ...
</p>
</article>
</section>
And the CSS for the , the and the CV class :
.content
{
position: relative;
top: 50px;
left: 125px;
}
article
{
background-color: #FFFFFF;
border-left: 4px #E52522 inset;
-webkit-box-shadow: 3px 2px 6px 1px rgba(50, 50, 50, 0.45);
-moz-box-shadow: 3px 2px 6px 1px rgba(50, 50, 50, 0.45);
box-shadow: 3px 2px 6px 1px rgba(50, 50, 50, 0.45);
}
.CV
{
display: block;
padding : 5px;
margin: 20px 0px;
opacity: 0.9;
max-width: 800px;
}
And the code for what I intended to be the line (but it doesn't quite work, its only the size of the browser's window):
#timeline
{
background-image: url('img/tweed.png');
width: 8px;
height: 100%;
position: absolute;
left: 50px;
-webkit-box-shadow: 2px 0px 6px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 2px 0px 6px 0px rgba(50, 50, 50, 0.75);
box-shadow: 2px 0px 6px 0px rgba(50, 50, 50, 0.75);
}
If my question is unclear, please let me know. Thank you.
Edit: I can give you more of the code if needed.

Answer 1

You can use the ::before pseudo element:
article:before{
position:absolute;
height:40px;
width:40px;
border-radius:20px;
background-color:#777;
content:'';
display:block;
top:10px;
left:-90px;
}
The specific styles are up to you. Your articles need to be positioned relatively.
JSFiddle

Answer 2

you'll need to add a new element for the year to to your article tag
<article>
<span class="timestamp">2014</span>
...
</article>
and then add these to your css
article { position: relative }
article .timestamp { position: absolute; left: ??px; top: ??px; }
article .timestamp:before { content:''; width: 50px; border-radius: 50%; }
more details here: http://jsfiddle.net/RdXw9/1/

Answer 3

Try just putting the circle inside the article and then positioning the div img tag right: "x"px...
kinda a hacky way to do it, I'm sure li styles may be better but... that should work
edit: example
CSS
#article img {
position:relative:right:50px;
}
html:
<div id="article" class="CV">
<img src="#"> CIRCLE </img>
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem ipsum ...
</p>
</div>