Draw triangle on right-border [duplicate]

Question

I have a ul element with many li. Some lines (li) are highlighted with yellow background.

I want to add a triangle to the right border. This triangle should looks like an arrow that point to the text.

Something like this:

Fiddle

I tried to draw this triangle with right border, but this not giving me the right shape.

<ul>
    <li>not highlighted</li>
    <li>not highlighted</li>
    <li class="highlighted">HIGHLIGHTED</li>
    <li>not highlighted</li>
</ul>
<style>
.highlighted {
    border-right: 20px solid red;
}
</style>

Please give a notice on the that one li can contain more the one line, so the height of the line can be changed. Arrow with fixed height (of one line) is good enough.

Is this possible? If yes, how?

Answer 1

You can use transform and Pseudo-elements

li{
  height: 20px;
  line-height: 20px;
  position: relative;
  margin-bottom: 10px
}
li.highlighted:before, li.highlighted:after{
  content: '';
  position: absolute
}
li.highlighted:before{
  width: 12px;
  height: 12px;
  right: 10px;
  transform: rotate(45deg);
  border-left: 2px solid red;
  border-bottom: 2px solid red
}
li.highlighted:after{
  height: 20px;
  width: 2px;
  right: 15px;
  background: red;
  top: -3px
}

<ul>
    <li>not highlighted</li>
    <li>not highlighted</li>
    <li class="highlighted">HIGHLIGHTED</li>
    <li>not highlighted</li>
</ul>

Answer 2

This should do it (but I doubt you can get outlined arrow without an image - only full).

.highlighted:after {
  content: "";
  position: absolute;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid red;
}

<ul>
  <li>not highlighted</li>
  <li>not highlighted</li>
  <li class="highlighted">HIGHLIGHTED</li>
  <li>not highlighted</li>
</ul>

Based on this tutorial.