line with a arrow in between pointing down

Question

I am trying to draw a line with a small arrow pointing down as in the image attached.

Answer 1

You can modify to this:

div.hr {
    width:70%;
    height: 1px;
    background: #7F7F7F;
}
div.hr:after {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 8px;
    left: 35%;
}
div.hr:before {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #7F7F7F transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 9px;
    left: 35%;
}

<div class="hr"></div>

As you can see you don't have to remove top from pseudo-elements. The only thing you have to add is height: 1px and background color same as the second triangle.

Also if you wan to use it inside another element for example and align to center you can use this:

div.hr {
    width:70%;
    height: 1px;
    background: #7F7F7F;
    position: relative;
    margin: 0 auto;
}
div.hr:after {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    left: 50%;
}
div.hr:before {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #7F7F7F transparent;
    display: block;
    width: 0;
    z-index: 1;
    left: 50%;
}

<div>
    <div class="hr"></div>
</div>

p.s. By the way i was the person who answered in your first post :)

After conversation with @user3861559 i created an approach for his situation. Instead of pseudo-elements I use nested divs with the same result:

div.hr {
    width:70%;
    height: 1px;
    background: #7F7F7F;
}
div.after {
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 8px;
    left: 35%;
}
div.before {
    position: absolute;
    border-style: solid;
    border-width: 15px 15px 0;
    border-color: #7F7F7F transparent;
    display: block;
    width: 0;
    z-index: 1;
    top: 9px;
    left: 35%;
}

<div class="hr">
    <div class="before"></div>
    <div class="after"></div>
</div>