HTML down arrow

Question

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

I could not get a downward arrow. Is there a way I can do this using html and css?

HTML

  <hr class="line">

CSS

.line{
width:70%;
color:red;
}

http://jsfiddle.net/4eL39sm1/

Thank.

Answer 1

You can use pseudo-elements :afterand :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">

Run codeHide result

You can play with border-widthto customize the size to suit your needs.