カスタムCssのスキンのCSS Psuedo要素の助けが必要Telerik Controls

Question

ここでは、cssとhtmlを使ってRadTabStripにカスタムCSSを適用しようとしています。これはtelerikコントロールですが、問題は単なるcss/htmlです。 私は以下のイメージのようにMenubarを設計しようとしています。

私はRadTemplateを使いたくないので、ここでDOMを変更することはできません。

問題のアイデアを得るには、コードスニペットと画像をご覧ください。私が使用している::後::効果を矢印取得する前に、それが選択されたときの事は、それが唯一の背景-color.Iとの国境全体のない矢印が表示されますされてこっちに失われています、でも

<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（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>ではなく、<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 
} 

が、それはあなたが、私は明確ではないんだ場合の望んだなら、私に教えてください。

Answer 2

私が使用::前と後に::内側のスパン "rtsTxt" のため、それが働いた... :)

.RadTabStrip_Custom .rtsSelected .rtsLink .rtsTxt ::

前

.RadTabStrip_Custom .rtsSelected .rtsLink :: before