<hr> line with a arrow in between pointing down - html

Question

I am trying to draw a line with a small arrow pointing down as in the image attached.
I was able to get it working on fiddle using before and after psuedo tags ( with help from Stack overflow).
<hr class="line">
http://jsfiddle.net/4eL39sm1/6/
But I now need it in a div tag like this
<div class="hr"></div>
I have edited my css accordingly
div.hr{
width:70%;
}
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: 45%;
}
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: 45%;
}
I made these 2 observations:
The arrow part looks a solid triangle.
The arrow (triangle was mispalced was up in the top). I removed the top value form css and it aligned well but it still looks like a triangle.
Is there a way I can fix this?
Thanks.

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>