Put arrow or triangle on end of line

Question

I am trying to replicate this look of the lines with an arrow (or a triangle is fine) on end side of the Input form. This image is from a old flash app that is being converted to HTML5:

I have gotten as far as having the lines around the input field like this:

HTML

<form action="">
    <div class="line">
        <label>Cab Width = 
            <input type="number" id="cabWidth" name="cabWidth" min="30" max="57.5" step="0.125" value="32" autofocus> (decimal inches)
        </label>
    </div>
</form>

CSS

.line {
  display: flex;
  flex: 1;
  width: 100%;
  margin: 20px auto;
  line-height: 1em;
}
.line:before, .line:after {
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background: linear-gradient(black, black);
  background-size: 100% 2px;
  background-position: 0% 50%;
  background-repeat: repeat-x;
}

But I cannot figure out how to add to the end of this a CSS triangle or arrow of some kind. Maybe it can't be done.

Would appreciate any ideas or guidance on how I might solve this.

Answer 1

You were very close in your solution, the only issue being we couldn't use :after:after to add on the arrows. See the following solution :)

I took different approach and made two distinct line spans. On each of these line spans, I used :after to add the arrows to the ends.

.line-container {
  display: flex;
  width: 100%;
  margin: 20px auto;
  align-items: center;
}

.line {
  flex-grow: 1;
  height: 1px;
  background: black;
  position: relative;
}

.line.arrow-right:after {
  position: absolute;
  content: '';
  bottom: -10px;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
}

.line.arrow-left:after {
  position: absolute;
  content: '';
  top: -10px;
  left: 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid black;
}

label {
  margin: 0 15px;
}

<form action="">
  <div class="line-container">
    <span class="line arrow-left"></span>
    <label>Cab Width =
      <input type="number" id="cabWidth" name="cabWidth" min="30" max="57.5" step="0.125" value="32" autofocus> (decimal inches)
    </label>
    <span class="line arrow-right"></span>
  </div>
</form>

Answer 2

If you use Bootstrap, you get a subset of the Glyphicons for free, and they include a number of arrow classes (among other things).

http://getbootstrap.com/components/

You can link in Bootstrap from their CDN (Content Delivery Network)

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

If you don't need the JavaScript components, you can just link to the bootstrap.min.css link above and skip the optional theme and JavaScript.

And then apply the class to an empty span to display the glyphicon. There's a list of what's available with the appropriate class names on the site.

<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-right"></span>

You can add these via css to an existing element with the :after syntax, just just need to dig into the Bootstrap css file and find the appropriate code for the icon you want to use, for example for the above:

glyphicon-chevron-right

:after {
    font-family: 'Glyphicons Halflings';
    content: "\e080";
}

glyphicon-chevron-left

:after {
    font-family: 'Glyphicons Halflings';
    content: "\ e079";
}