html - 需要帮助自定义 Css 皮肤 Telerik 控件中的 CSS 伪元素

Question

所以我很可怜，尝试使用以下 css 和 html 将自定义 css 应用于 RadTabStrip。虽然这是 telerik 控件，但问题只是纯粹的 css/html。 我正在尝试设计如下图所示的菜单栏。

请注意，我不想使用 RadTemplate，所以我不能在这里更改 DOM。

请查看下面的代码片段和图片以了解问题!

<div class="RadTabStrip_Custom">
    <div class="rtsLevel rtsLevel1">
        <ul class="rtsUL">
            <li class="rtsLI FirstChild">
                <span class="rtsLink">
                    <span class="rtsTxt">Delivery Settings</span>
                </span>
            </li>
            <li class="rtsLI rtsSelected selectedLI rtsClicked">
                <span class="rtsLink">
                    <span class="rtsTxt">Pick a Template</span>
                </span>
            </li>
            <li class="rtsLI LastChild rtsClicked">
                <span class="rtsLink">
                    <span class="rtsTxt">Almost Done</span>
                </span>
            </li>
        </ul>
    </div>
</div>

我已经使用::after 和::before 来获得箭头效果，但问题是当它被选中时它应该只显示边框而不是带有背景颜色的整个箭头。我在这里迷路了，甚至尝试过::after(2) 和::before(2) 但我是从 from here 知道的主要浏览器不支持它。我怎样才能得到这种效果？

.RadTabStrip_Custom {
    color: #000;
    font: 12px "Segoe UI",Arial,Helvetica,sans-serif;
    line-height: 26px;
    background-color: #ffffff;
    width: 100%;
}

.RadTabStrip_Custom .rtsUL {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 80%;
    border: 0px solid red;
}

.RadTabStrip_Custom .rtsLI {
    width: 20%;
    overflow: visible !important;
    position: relative;
    left: 4px;
}

.RadTabStrip_Custom .rtsLI .rtsFirst {
    overflow: hidden !important;
}

.RadTabStrip_Custom .rtsGhostTab {
    border-color: #0f1d48;
    border-radius: 5px;
    color: #fff;
    background-color: #324d92;
}

.RadTabStrip_Custom .rtsLI {
    color: #fff;
    font-size: 18px;
    font-family: "Segoe UI",Arial,Helvetica,sans-serif;
    margin-right: 1%;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #b7d6e8 !important;
    padding: 9px;
}

.RadTabStrip_Custom .rtsLink, .RadTabStrip_Custom .rtsLink:hover {
    background-color: #044666;
    background-image: none;
    color: #fff;
    font-size: 18px;
    font-family: "Segoe UI",Arial,Helvetica,sans-serif;
    margin-right: 1%;
    padding: 9px;
}

.RadTabStrip_Custom .rtsSelected .rtsLink, .RadTabStrip_Custom .rtsSelected .rtsLink:hover {
    background-color: #ffffff;
    background-image: none;
    color: #b8d5e5;
    font-size: 18px;
    font-family: "Segoe UI",Arial,Helvetica,sans-serif;
    margin-right: 1%;
    padding: 9px;
    border-top: 1px solid #b8d5e5;
    border-bottom: 1px solid #b8d5e5;
}

.RadTabStrip_Custom .rtsLink::before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -22px;
    border-width: 22px 0 22px 16px;
    border-style: solid;
    border-color: #004466 #004466 #004466 transparent;
    left: -7px;
}

.RadTabStrip_Custom .rtsLink::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -22px;
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-left: 16px solid #004466;
    right: -5px;
}

.FirstChild .rtsLink {
    border-left: 1px solid #b8d5e5;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}

.FirstChild .rtsLink::before {
    content: "";
    border-width: 0;
}

.LastChild .rtsLink {
    border-right: 1px solid #b8d5e5;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

.LastChild .rtsLink::after {
    content: "" !important;
    border-top: 0 solid transparent;
    border-bottom: 0 solid transparent;
}

“选择模板”选项卡在两个图像中都被选中，不用担心反色方案。

我目前的设计

我要设计什么

Answer 1

要实现这一点(如果我明白你想做什么)，你必须在 <li> 上应用 :hover但不在<span> .

这样你就可以在它们上面使用伪元素来做类似的事情:

li:hover:before {
  //do my border-bottom stuff
}
li:hover .rtsLink:before {
  //do my arrow stuff
}
li:hover .rtsLink:after {
  //do my arrow stuff
}

如果我不清楚，请告诉我这是否是您想要的。