Draw a triangle on the right border

Question

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

I want to add a triangle to the right border. This triangle should look like an arrow pointing to the text .

Something like that:

Fiddle

I tried to draw this triangle with the right frame, but this does not give me the correct 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 indicate a notification that one li may contain more than one line, so you can change the height of the line. A fixed-height arrow (single row) is good enough.

Is it possible? If so, how?

Answer 1

( , - ).

.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>

Hide result

.

Answer 2

transform 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>

Hide result

Answer 3

Like this:

li{ 
    position: relative;
}

.highlighted:after, .highlighted:before { 
    right: 0px;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none; 

} 

.highlighted:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
} 
.highlighted:before { 
    border-color: rgba(245, 23, 7, 0);
    border-right-color: #f51707;
    border-width: 9px;
    margin-top: -9px;
}

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

Run codeHide result