stilearn cssを使用して選択したメニュー項目をマークする方法

Question

stilearn cssを使用しているプロジェクトを継承しました。
これは、メニューのスタイリングを提供し、機能の1つは、付属のスクリーンショットに示すように、選択されたメニューボタンに小さな白い三角形をマークしています。この動作の

例はここにある： http://wrapbootstrap.com/preview/WB0TFD2S0

基本的にこれがどのように行われていますか？私はI.Eを使用しています。ドームエクスプローラーとそれを把握することはできません。 （それは、他のいくつかのCSSを使用して行われることが判明するかもしれません - それの全体の束があります）。 CSSスタイル "アクティブ"が<li>アイテムに適用されていることがわかります。

Answer 1

<ul class="sidebar">要素はアクティブとして定義することができる<li>リスト要素を有しています。リストアイテムがアクティブな場合、<li class="active">は、その白い三角形を取得します。

:beforeと:afterの擬似要素に境界線を使用することで、トリック自体が行われます。ここではその問題の詳細を参照してください： https://css-tricks.com/snippets/css/css-triangle/

Answer 2

ここ

.sidebar>li.active:before { 
    border-color: rgba(204,204,204,0); 
    border-right-color: #E0E4E8; 
    border-width: 11px; 
    top: 50%; 
    margin-top: -11px; 
} 

.sidebar>li.active:after, .sidebar>li.active:before { 
    right: -1px; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

このCSSを試してみてください