Custom CSS top-border

Question

I have to apply the same style for a set of paragraph. The top border have to be look the same like this.like this
I don't want to make it for me, I just need some advice where to start! Thank you!

Answer 1

If you don't want to / cannot use images but may add additional code to your paragraphs, this should work for you:

http://jsfiddle.net/Moonbird_IT/3rafe27z/2/

This draws the additional time line with the dot above your paragraph:

<div class="head-info">
    <span class="year-left">2000</span>
    <span class="year-right">2005</span>
    <div class="yellow-dot"></div>        
</div>

The rest is just CSS positioning the years to the left and right and the dot showing up in the middle. You may have to add an additional <br> tag to clear the floated years.

Answer 2

It looks like there are 2 out-of-the-ordinary things you need to do for this:

1. Have "partial" left and right borders.
2. Add a diamond (or is it a circle?) to the center of the top border.

To achieve number 1, you can add a ::before and ::after pseudo element to the container. If you make them shorter than the main element, fill it with white, you can position it so that it overlaps the main element's left and right borders, causing a partial overlap and the partial-border effect.

For number 2, you can add a separate element and position it over the center of the top of the main element's top border.

Does this make sense?