Пользовательский символ маркера для элементов <li> в <ul>, который является обычным символом, а не изображением

126

Я понимаю, что можно указать настраиваемую графику в качестве символа маркера замены, используя атрибут CSS:

list-style-image

А затем присвоить ему URL.

Однако в моем случае я просто хочу использовать символ «+». Я не хочу создавать для этого рисунок, а затем указывать на него. Я бы предпочел просто проинструктировать неупорядоченный список использовать символ плюса в качестве символа маркера.

Можно ли это сделать, или я должен сначала сделать графику?

html  css  webkit  mobile-webkit 
— idStar
источник

Ответы:

81

Следующее цитируется из Списков приручения :

Бывают случаи, когда у вас есть список, но вам не нужны маркеры или вы хотите использовать какой-либо другой символ вместо маркера. Опять же, CSS предлагает простое решение. Просто добавьте list-style: none; к вашему правилу и заставьте LI отображаться с выступами. Правило будет выглядеть примерно так:

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

Либо заполнение, либо маржа должны быть установлены на ноль, а другой - на 1em. В зависимости от того, какой «маркер» вы выберете, вам может потребоваться изменить это значение. Отрицательный текстовый отступ приводит к смещению первой строки влево на эту величину, создавая выступающий отступ.

HTML будет содержать наш стандартный UL, но с любым символом или объектом HTML, который вы хотите использовать вместо маркера, предшествующего содержимому элемента списка. В нашем случае мы будем использовать », кавычку с двойным прямым углом:».

»Пункт 1
» Пункт 2
»Пункт 3
» Пункт 4
»Пункт 5 сделаем
   немного длиннее, чтобы
   он обернулся

— Евангелист API TJ WealthEngine
источник
1
Ваше решение сработало в сочетании с псевдоселектором: before, на который указываете вы и @Tieson T. Мне понравилось, что вы рассказали, как различные атрибуты в <UL> работают согласованно, имитируя отступ пули.
— idStar 08
9
Вот как я это собрал, и это сработало: ul {font-size: 14px; высота строки: 16 пикселей; стиль списка: нет; маржа слева: 0; отступ слева: 1em; текстовый отступ: -1em; } li: before {content: "+"; } Мне пришлось поставить пробел после символа +, но он выглядит достаточно хорошо выровненным.
— idStar 08
6
К сожалению, при использовании этого метода значок маркера включается в выборки, чего не происходит с обычными маркерами.
— Конрад Хёффнер
169

Это поздний ответ, но я только что наткнулся на это ... Чтобы получить правильный отступ на любых строках, которые переносятся, попробуйте это следующим образом:

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}
— Майк Т
источник
1
Для меня лучше использовать ch в качестве единицы измерения, в частности, text-indent: -2chчтобы учесть знак + и пробел после него, а затем padding-right: 1chдобавить этот пробел. Тем не менее, большой +1.
— cobaltduck
44

Так много решений.
Но я все еще думаю, что есть возможности для улучшения.

Преимущества:

  • очень компактный код
  • работает с любым размером шрифта
    (без абсолютных значений пикселей)
  • идеально выравнивает строки
    (без небольшого сдвига между первой строкой и последующими строками)

ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1.2em;
}
ul li:before {
	content: "+";
	position: absolute;
	left: 0;
}
<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>
Развернуть фрагмент

— Jpsy
источник
2
это самое лучшее
— user3168511
1
На мой взгляд, это лучший ответ, потому что он указывает, как можно настроить и другие детали. К нему также прилагается «Фрагмент кода выполнения»!
— Ionuț Ciuta
1
Это должен быть ответ. Чисто и просто
— EvilDr
1
Я искал решение с использованием изображения и пробовал много ответов, но этот сработал для меня лучше всего! Я смог использовать content: url('link-to-my-asset.svg');и установить ширину изображения и отступ между маркером и содержимым. Спасибо!
— AnnieP
Это хороший ответ. Однако мне нужно было решение, которое также могло бы поддерживать подсчет столбцов
— Кушагр Арора
29

Это решение W3C. Работает в Firefox и Chrome.

ul { list-style-type: "🔔"; }
/* Sets the marker to a 🔔 emoji character */

http://dev.w3.org/csswg/css-lists/#marker-content

ul { list-style-type: "🔔 "; }
  <ul><li>item</li></ul>
Развернуть фрагмент

— PHPst
источник
2
Хотя кажется, что это работает в текущих версиях Firefox, результат крайне уродлив: пользовательский маркер помещается прямо перед текстовым содержимым (привязка к нему), почти как если бы li:before {content:"…";}он использовался без каких-либо других отступов и выравнивания.
— Антон Самсонов
19

Вот лучшее решение, которое я нашел на данный момент. Он отлично работает и кроссбраузерно (IE 8+).

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

Важно, чтобы символ находился в плавающем блоке с фиксированной шириной, чтобы текст оставался выровненным, если он слишком длинный для размещения в одной строке. 1.2em - это ширина, которую вы хотите для своего персонажа, измените ее по своему усмотрению .

— NicolasBernier
источник
Это лучшее решение, которое я нашел.
— Чарльз Ропер
floatснова использовать ? ... неа.
10

Вы можете использовать :beforeпсевдоселектор, чтобы вставить содержимое перед элементом списка. Вы можете найти пример в Quirksmode по адресу http://www.quirksmode.org/css/beforeafter.html . Я использую это для вставки гигантских кавычек вокруг цитат ...

НТН.

— Тисон Т.
источник
10

Мое решение использует позиционирование для автоматического выравнивания обернутых строк. Так что вам не нужно беспокоиться о настройке padding-right для li: before.

ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}
<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
Развернуть фрагмент

— user648519
источник
9

Font-awesome предлагает отличное решение прямо из коробки:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />

<ul class='fa-ul'>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
  <li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>
Развернуть фрагмент

— SDW
источник
8

Желательно уточнить стиль, <li>чтобы он не влиял на <ol>элементы списка. Так:

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul li {
    padding-left: 1em;
    text-indent: -1em;
}

ul li:before {
    content: "+";
    padding-right: 5px;
}
— silverliebt
источник
4 

.list-dash li, .list-bullet li {
    position: relative;
    list-style-type: none; /* disc circle(hollow) square none */
    text-indent: -2em;
}
.list-dash li:before {
    content: '—  '; /* em dash */
}
.list-bullet li:before {
    content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
}
<ul class="list-dash">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>
Развернуть фрагмент

— боб
источник
Up проголосовал за это только потому, что / * скопируйте и вставьте маркер из HTML в браузере в css (без использования кодов ascii) * /
— kheya
2

Стиль Em dash:

ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash > li:before {
  content: "\2014\00A0"; /* em dash + space*/
}
— dmartinezfernandez
источник
1

Я предпочитаю использовать отрицательную маржу, это дает вам больше контроля

ul {
  margin-left: 0;
  padding-left: 20px;
  list-style: none;
}

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}
— Джон Магнолия
источник
1

Интересно, что я не считаю, что какие-либо из опубликованных решений достаточно хороши, потому что они полагаются на тот факт, что используемый символ имеет ширину 1em, что не обязательно должно быть так (возможно, за исключением ответа Джона Магнолии, который, однако, использует поплавки, которые могут усложняю вещи другим способом). Вот моя попытка:

ul {
  list-style-type: none;
  margin-left: 0;
  padding-left: 30px; /* change 30px to anything */
  text-indent: -30px;
}
ul li:before {
  content: "xy";
  display: inline-block; 
  width: 30px;
  text-indent: 0;
  text-align: center; /* change this for different bullet position */
}
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
Развернуть фрагмент

Это имеет следующие преимущества (по сравнению с другими решениями):

  1. Он не зависит от ширины символа, как вы видите в примере. Я использовал два символа, чтобы показать, что это работает даже с широкими пулями. Если вы попробуете это в других решениях, вы получите смещение текста (на самом деле он даже виден с символом * при более высоком масштабе).
  2. Это дает вам полный контроль над пространством, используемым пулями . Вы можете заменить 30px чем угодно (даже 1em и т. Д.). Только не забыл поменять на всех трех местах.
  3. Если дает вам полный контроль над расположением пули . Просто замените на то text-align: center;, что вам нравится. Например, вы можете попробовать color: red; text-align: right; padding-right: 5px; box-sizing: border-box; или, если вам не нравится играть с рамкой, просто вычтите отступ (5 пикселей) из ширины (т.е. ширина: 25 пикселей в этом примере). Вариантов много.
  4. Он не использует поплавки, поэтому его можно содержать где угодно.

Наслаждаться.

— Горн
источник
1 

.single-before {
  list-style: "👍";
  list-style-position: outside!important;
}
<ul class="single-before">
  <li> is to manifest perfection already in man.</li>
  <li> is to bring out the best facets of our students personalities.</li>
</ul>
Развернуть фрагмент

— Вирадж Гири
источник
Спасибо - это очень чисто, и я забыл о том !important, что было жизненно важно для работы моего настраиваемого CSS в Blogspot
— velkoon
-2

попробуй это

    ul.a {
        list-style-type: circle;
    }
    
    ul.b {
        list-style-type: square;
    }
    
    ol.c {
        list-style-type: upper-roman;
    }
    
    ol.d {
        list-style-type: lower-alpha;
    }
    
<!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    <p>Example of unordered lists:</p>
    <ul class="a">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <ul class="b">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ul>
    
    <p>Example of ordered lists:</p>
    <ol class="c">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    <ol class="d">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Coca Cola</li>
    </ol>
    
    </body>
    </html>
Развернуть фрагмент

— Venkat
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.