Стайлинг кендо angular вкладок; стрелка под активной вкладкой

Question

Я бы хотел переопределить стиль по умолчанию для kendo angular tabstrip , в идеале, в соответствии с лучшими практиками. Сейчас я использую селекторы ::ng-deep, что, как я знаю, является плохой практикой; но до сих пор не могу понять другой путь. Посмотрите мой stackblitz .

У меня также возникают проблемы при реализации стрелки под активной вкладкой. В приведенном выше примере я хотел бы добиться этого:

Маленький белый треугольник / стрелка, которая появляется под активной вкладкой. Я думаю, что лучшее решение CSS было бы лучшим, но я открыт для других решений. Он должен находиться в центре выбранной вкладки, независимо от ее длины. Пожалуйста, постарайтесь, чтобы это работало в предоставленном мною стеке Спасибо.

Answer 1

Вы можете сделать это в CSS только с помощью псевдоэлемента: after на активной LI. Нарисуйте треугольник и поместите его:

Обновлено StackBlitz

li.k-state-active:after{
    content: '';
    position: absolute;
    z-index: 1000;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: -1px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #fff;
    clear: both;
}