Need help for CSS Psuedo elements in Custom Css skin Telerik Controls

Question

So here is poor me,trying to apply custom css to RadTabStrip with following css and html.Although this is telerik control but the problem is just pure css/html. I am trying to design Menubar as shown in image below.

Please note that i dont want to use RadTemplate,so i can not change DOM here.

Please look at code snippet and images below to get an idea of problem!

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

I have used ::after and ::before to get arrow effect but the thing is when it is selected it should only display border not whole arrow with background-color.I am lost over here,even tried ::after(2) and ::before(2) but i came to know from from here that it is not supported in major browser.How can i get this effect?

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

"pick a template" tab is selected in both images,No worries about inverse color scheme.

What i have design till now

What i want to design

score 0 · Answer 1 · answered Sep 14 '16 at 13:49

To achieve that (if I understand what you want to do), you will have to apply the :hover on the <li> but not on <span>.

Doing so you will be able to use pseudo-elements on both of them doing something like :

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

Let me know if it's what you wanted of if I'm not clear.

score 0 · Answer 2 · answered Sep 14 '16 at 16:51

0

I used ::before and ::after for inner span "rtsTxt" and it worked... :)

.RadTabStrip_Custom .rtsSelected .rtsLink .rtsTxt::before

.RadTabStrip_Custom .rtsSelected .rtsLink::before

answered Sep 14 '16 at 16:51

PalakM

301
2
17

Need help for CSS Psuedo elements in Custom Css skin Telerik Controls

2 Answers2