Цвет фона только в маркированной части тега <li>

Question

Я пытаюсь создать маркированный список, в котором цвет фона только левого поля (маркера) тега имеет цвет фона. Я тщетно пытался найти решение в Интернете, просто интересно, могут ли какие-либо эксперты по CSS предложить решение?

css

1

Daniel Williams 16 Фев 2015 в 04:08

Answer 1

Это то, что вы хотите? Этот код делает красный цвет фона слева от тега li

<style>
    ul{background-color: red;}
    li{margin-left: 10px; background-color:white;}
</style>


<ul>
    <li> aaaaa </li>
    <li> bbbb <li>
</ul>

1

Stella 16 Фев 2015 в 01:14

Answer 2

HTML:

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

CSS:

ul{background:coral}
li{background:green}

jsFiddle

0

Almis 16 Фев 2015 в 01:13

Answer 3

Если вы хотите использовать прозрачный фон (чего нельзя добиться с двумя другими предложенными ответами), альтернативным подходом является использование псевдоэлементов.

ul {
  padding-left: 20px;
}
li {
  position: relative;
}
li:before {
  background: blue;
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 20px;
  margin-left: -20px;
  z-index: -1;
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

1

Etheryte 16 Фев 2015 в 01:14

Цвет фона только в маркированной части тега <li>

3 ответа

Похожие вопросы

Новые вопросы

css