Q:

Padding when using CSS before selector

Creating a timeline of collated posts. For each H2 heading, I would like to add a circle, which will sit on the border of the parent div, by using a negative margin. 
However, when I do that, it results in the text also shifting to the left (understandably).  
Any advice please? 
   <!DOCTYPE html>
<html>
<head>

</head>
<body>
<div class="fl-post-text">
<div class="one-sixth first">
  <span> Date goes here</span> 
    </div>
    <div class="five-sixths">
    <div class="fl-post-title"> Post Title</div>
    <h2>Sub Heading</h2>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut bibendum mi, nec dapibus nisi. Aliquam rhoncus neque nec tortor pretium varius. Aenean ornare tempor varius. Aliquam erat volutpat. Aliquam tincidunt mattis nisi a consequat. Nullam vitae arcu lectus. Suspendisse pharetra dignissim orci, ac luctus velit mattis in.

</p>

<strong>Time of update</strong>
<div class="point">
<h2>update heading</h2>
</div>
<div class="textarea"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ut bibendum mi, nec dapibus nisi. Aliquam rhoncus neque nec tortor pretium varius. Aenean ornare tempor varius. Aliquam erat volutpat. Aliquam tincidunt mattis nisi a consequat. Nullam vitae arcu lectus. Suspendisse pharetra dignissim orci, ac luctus velit mattis in.

</p></div>
<div class="spacer"></div>

</div>
</div>
<div class="clearfix"></div
</body>
</html>

CSS
.fl-post-grid-post {
    font-size: 14px;
}
.fl-post-feed-post {
    border: 0;
}
.fl-post-text {
    padding: 20px;
}
.fl-post-text  p {
    font-size: 16px;
}
.fl-post-text .textarea p {
    font-size: 16px;
    font-weight: 600;
}

.fl-post-text .textarea ol li {
    font-size: 16px;
    font-weight: 600;
}

.fl-post-text .one-sixth {
    font-size: 16px;
    font-weight: 700;
    color: white;
    width:100%;
    margin-bottom: 2px;
}

.fl-post-text .one-sixth span {
    background-color: #d81452; 
    padding: 5px;
}

.fl-post-text .five-sixths {
  border-left: solid 2px #CACACA;
  padding-left: 20px;

}

.spacer
{  height: 15px;
   }

.fl-post-text .textarea {background-color:#F1EBEB;
border-bottom: solid 2px #CACACA;
    padding: 10px;
}

.fl-post-text h2 {font-size: 18px; 
}
.fl-post-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    margin: 0;
    padding: 10px 0 5px;
}

.fl-post-title span {
    background-color: #f4dbdf; 
    padding: 5px;
}

.fl-post-meta {
    padding: 0 0 15px;
}

.point ::before{
   content: '';
   display: inline-block;
   margin-left:-28px;
   width: 15px;
   height: 15px;
   -moz-border-radius: 15px;
   -webkit-border-radius:15px;
   border-radius:15px;
   background-color: grey;
}

JS Fiddle Link https://jsfiddle.net/hy6k8u0q/

A:

.point ::before {
    margin-right: 15px;
}

Simply add margin-right to the rule and it should work the way you want it.

