Arrow style over the text using css

Question

I am trying to apply an arrow style on selected ul, li elements.

However, I am quite sure how to do that. So far I am able to do this

below is my code.

.appText,
.prodText {
  padding: 5px 5px 5px 0;
  border-top: 1px solid transparent;
  border-radius: 3px;
}

.appText.selected,
.prodText.selected {
  background: rgba(255, 255, 255, .075);
  border-left: 1px solid green;
  border-top: 1px solid green;
  border-bottom: 1px solid green;
  border-radius: 3px;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<ul data-bind="foreach: applications()">
                            <li data-bind="click: values())">
                                <div class="appText" data-bind="css: { selected: val}">
                                    <span data-bind="text: name"></span>
                                </div>
                                <ul data-bind="foreach: products">
                                    <li data-bind="click: values()">
                                        <div class="prodText ProdText" data-bind="css: { selected: val">
                                            <span class="prodName" data-bind="text: name, attr: { title: name }"></span>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                        </ul>