Стилизация упорядоченного списка с фоновым изображением

.color-overlap-right { 
 
\t background-color : #d93; 
 
\t margin-right : -25%; 
 
} 
 

 
ol { 
 
\t margin-left:0; 
 
\t padding-left:0; 
 
\t counter-reset: ol-item 
 
} 
 

 
ol li { 
 
\t margin-left:0; 
 
\t padding-left:0; 
 
\t list-style-type:none; 
 
\t counter-increment: ol-item; 
 
} 
 

 
ol li:before { 
 
\t content:counter(ol-item) " "; 
 
\t background-image: url('../img/square.png'); 
 
\t background-position: 0 -20px; 
 
    background-repeat: no-repeat; 
 
}

<html lang="en"> 
 
<div class="container"> 
 
    <div class="color-overlap-right"> 
 
\t \t \t <div class="left-text"> 
 
     <ol style="list-style: aliceblue;"> 
 
      <li>Earn</li> 
 
\t \t \t \t \t \t <li>Transfer</li> 
 
\t \t \t \t \t \t <li>Apply</li> 
 
     </ol> 
 
     </div> 
 
\t </div> 
 
</div>

Я хочу, чтобы создать нумерованный список в HTML, который выглядит как этого

Это должно быть упорядоченным список без «точек " Нумерация должна быть выделена курсивом и шрифтом. должен либо иметь фоновое изображение/цвет, как показано. Кто-то может помочь? В настоящее время я могу удалить «точку» и добавить цвет фона. Однако я не могу настроить поля между фоновым изображением и номером, чтобы он выглядел так, как показано ниже. Может кто-нибудь помочь?

источник

2017-02-22 Rajan Phatak

разместим ваш код пожалуйста –

Я думаю, вам просто нужно добавить некоторые CSS свойства для достижения этой конструкции, добавить эти CSS в ol li:before селектора

ol li:before { 
    font-size: 39px; 
    color: #fff; 
    font-weight: bold; 
    padding-left: 15px; 
    text-shadow: -4px 2px 7px #504747; 
    font-style: italic; 
    font-family: sans-serif; 
}

Edited

/*This is for square box*/ 
    ol li:after{ 
     content: ""; 
     display: block; 
     background: #ab6b0b; 
     position: absolute; 
     top: 17px; 
     left: 3px; 
     height: 18px; 
     width: 17px; 
    }

Результат будет выглядеть так:

Вы можете изменить цвет шрифта и тени в соответствии с вашим UI

.color-overlap-right { 
 
    background-color: #d93; 
 
    margin-right: -25%; 
 
} 
 

 
ol { 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
    counter-reset: ol-item 
 
} 
 

 
ol li { 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
    list-style-type: none; 
 
    counter-increment: ol-item; 
 
    position: relative; 
 
} 
 

 
ol li:before { 
 
    content: counter(ol-item) " "; 
 
    background-image: url('../img/square.png'); 
 
    background-position: 0 -20px; 
 
    background-repeat: no-repeat; 
 
    font-size: 39px; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    padding-left: 25px; 
 
    text-shadow: -4px 2px 7px #504747; 
 
    font-style: italic; 
 
    font-family: sans-serif; 
 
} 
 

 
ol li:after{ 
 
    content: ""; 
 
    display: block; 
 
    background: #ab6b0b; 
 
    position: absolute; 
 
    top: 17px; 
 
    left: 3px; 
 
    height: 18px; 
 
    width: 17px; 
 
}

<html lang="en"> 
 
<div class="container"> 
 
    <div class="color-overlap-right"> 
 
    <div class="left-text"> 
 
     <ol style="list-style: aliceblue;"> 
 
     <li>Earn</li> 
 
     <li>Transfer</li> 
 
     <li>Apply</li> 
 
     </ol> 
 
    </div> 
 
    </div> 
 
</div>

источник

2017-02-22 11:35:50

я хотел квадратное изображение позади число, а не только тень. –

Проверьте обновленный ответ, вам нужно изменить квадрат, который генерируется в чистом 'CSS' not image –

html { 
    background-color : #d93; 

} 

ol { 
    margin-left:0; 
    padding-left:0; 
    counter-reset: ol-item; 
    color:#fff; 
    font-family: arial; 
} 

ol li { 
    margin-left:0; 
    padding-left:0; 
    list-style-type:none; 
    counter-increment: ol-item; 

} 

ol li:before { 
    font-size:40px; 
    background: #d25f14; 
    content: counter(ol-item) ; 
    width:28px; 
    height:24px; 
    overflow:show; 
    display:inline-block; 
    background:url(place your image here); 
    text-align:right; 
    margin-bottom:20px; 
    margin-right:10px; 
}

Используйте этот CSS и сделать свой образ так, как вы хотите

источник

2017-02-22 11:22:49 18zehn

Вы могли бы использовать что-то вроде этого:

HTML:

<ol class="mylist"> 
    <li> 
    <div>&nbsp;</div><span>Earn</span></li> 
    <li> 
    <div>&nbsp;</div><span>Transfer</span></li> 
    <li> 
    <div>&nbsp;</div><span>Apply</span></li> 
</ol>

CSS:

body { 
    background-color: #d93; 
} 

.mylist { 
    font-size: 25px; 
} 

.mylist li { 
    position: relative; 
    counter-increment: section; 
    list-style: none; 
    margin-left: -20px; 
    z-index: 0; 
} 

.mylist li span { 
    font-size: 17px; 
    font-family: arial; 
    color: #FFFFFF; 
} 

.mylist li div { 
    position: absolute; 
    left: 0px; 
    bottom: 0px; 
    display: inline-block; 
    width: 15px; 
    height: 15px; 
    background-color: #D25F15; 
    z-index: 1; 
    border-radius: 2px; 
} 

.mylist li:before { 
    position: relative; 
    font-style: italic; 
    font-weight: bold; 
    color: #FFFFFF; 
    content: counter(section) " "; 
    margin-left: 12px; 
    z-index: 2; 
}

Demo

источник

2017-02-22 11:29:54

Стилизация упорядоченного списка с фоновым изображением

ответ

Смежные вопросы