在右边框上绘制三角形

我有一个很多李的ul元素.某些线条(li)以黄色背景突出显示.

我想在右边框添加一个三角形.此三角形应该看起来像指向文本的箭头.

像这样的东西:

小提琴

我试图用右边框绘制这个三角形,但这并没有给我正确的形状.

    
not highlighted
    
not highlighted
    
HIGHLIGHTED
    
not highlighted

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?

您可以使用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
}

    
not highlighted
    
not highlighted
    
HIGHLIGHTED
    
not highlighted

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

  
not highlighted
  
not highlighted
  
HIGHLIGHTED
  
not highlighted