I am trying to draw a line with a small arrow pointing down as in the image attached.
I have not been able to get the downward arrow. Is there a way I can do it using html and css?
HTML
<hr class="line">
CSS
.line{
width:70%;
color:red;
}
http://jsfiddle.net/4eL39sm1/
Thanks.
You can use pseudo-elements :after
and :before
:
.line {
width:70%;
}
.line:after {
content:'';
position: absolute;
border-style: solid;
border-width: 7px 7px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
top: 8px;
left: 45%;
}
.line:before {
content:'';
position: absolute;
border-style: solid;
border-width: 7px 7px 0;
border-color: #7F7F7F transparent;
display: block;
width: 0;
z-index: 1;
top: 9px;
left: 45%;
}
<hr class="line">
You can play with border-width
to adjust the size to your needs.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With