私はスクリーンショットに示すように、カスタムリストを作成したいと私はブートストラップ

Question

に私の主なCSSコードを使用していますが次のとおりです。ここで

.bg-blue { 
    background-color: #022E3D; 
    color: white; 
} 

.bg-blue ul li { 
    background-image: url(http://s32.postimg.org/fdofyahrp/Icon.png); 
    background-repeat: no-repeat; 
    padding-left: 5em; 
    background-size: auto; 
    padding-bottom: 3em; 
} 
.bg-blue ul li::before { 
    content: " "; 
    min-height: 59px; 
    display: block; 
    background-color: #d5d5d5; 
    width: 1px; 
    position: relative; 
    top: 3.5em; 
    left: -50px; 
} 

.bg-blue ul li:last-child:before { 
    content: " "; 
    background-color: transparent; 
} 

はフィドルです：https://jsfiddle.net/amanturate/sznqax6b/7/

主な問題テキストが画像の横に並んでいないことです。それを行うより良い方法はありますか？私はブートストラップv3を使用しています。

Answer 1

代わり:beforeの使用:after擬似要素と擬似要素の先頭位置調整：

.bg-blue ul li::after { 
    content: " "; 
    min-height: 59px; 
    display: block; 
    background-color: #d5d5d5; 
    width: 1px; 
    position: relative; 
    top: 2em; 
    left: -50px; 
} 

.bg-blue ul li:last-child:after { 
    content: " "; 
    background-color: transparent; 
}