blocks|key|544402|text|您可以使用:before伪选择器在列表项前面插入内容。你可以在http://www.quirksmode.org/css/beforeafter.html上的Quirksmode上找到一个例子。我用它在块引号两边插入巨大的引号...|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|544403|HTH。|544404|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/css/beforeafter.html^0|5|7|V|1A|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

<p>You can use the <code>:before</code> pseudo-selector to insert content in front of the list item. You can find an example on Quirksmode, at <a href="http://www.quirksmode.org/css/beforeafter.html" rel="noreferrer">http://www.quirksmode.org/css/beforeafter.html</a>. I use this to insert giant quotes around blockquotes...</p>

<p>HTH.</p>


blocks|key|544416|text|这是一个迟来的回答，但我只是偶然发现了这个...要在换行的任何行上获得正确的缩进，请尝试这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|544417|ul+{
++list-style:+none;
++margin-left:+0;
++padding-left:+0;
}

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

li:before+{
++content:+"%2B";
++padding-right:+5px;
}|code-block|syntax|javascript|544418|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This is a late answer, but I just came across this... To get the indenting correct on any lines that wrap, try it this way:</p>

<pre><code>ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

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

li:before {
  content: "+";
  padding-right: 5px;
}
</code></pre>


blocks|key|544439|text|这就是W3C解决方案。适用于Firefox和Chrome。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|544440|ul+{+list-style-type:+"";+}
/*+Sets+the+marker+to+a++emoji+character+*/|code-block|syntax|javascript|544441|http://dev.w3.org/csswg/css-lists/#marker-content|offset|length|544442|​|544443|ul+{+list-style-type:+"+";+}|544444|<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>|544445|544446|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1D|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@$I|11|J|12|1|13]]|A|$]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|Q|3|L|5|6|7|17|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|H]]]]

<p>This is the W3C solution. Works in Firefox and Chrome.</p>
<pre><code>ul { list-style-type: &quot;&quot;; }
/* Sets the marker to a  emoji character */
</code></pre>
<p><a href="http://dev.w3.org/csswg/css-lists/#marker-content" rel="nofollow noreferrer">http://dev.w3.org/csswg/css-lists/#marker-content</a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>ul { list-style-type: " "; }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
&lt;li&gt;item&lt;/li&gt;
&lt;li&gt;item&lt;/li&gt;
&lt;li&gt;item&lt;/li&gt;
&lt;li&gt;item&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|544461|text|建议限定<li>的样式，这样它就不会影响<ol>列表项。所以：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|544462|ul+{
++++list-style:+none;
++++margin-left:+0;
++++padding-left:+0;
}

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

ul+li:before+{
++++content:+"%2B";
++++padding-right:+5px;
}|code-block|syntax|javascript|544463|entityMap^0|4|4|K|4|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>It's advisable to qualify the styling of the <code>&lt;li&gt;</code> so it does not affect <code>&lt;ol&gt;</code> list items. So:</p>

<pre><code>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;
}
</code></pre>


blocks|key|544465|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|544466|.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)+*/
}|code-block|syntax|javascript|544467|<ul+class="list-dash">
++++<li>Item+1</li>
++++<li>Item+2</li>
++++<li>Item+3</li>
++++<li>Item+4</li>
</ul>|544468|544469|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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) */
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="list-dash"&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
    &lt;li&gt;Item 4&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|544494|text|我的解决方案使用定位来让折叠线自动正确地对齐。因此，您不必担心在li:之前设置padding-right。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|544495|​|544496|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:+"%2B";
}|code-block|syntax|javascript|544497|<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>|544498|544499|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>My solution uses positioning to get wrapped lines automatically line up correctly. So you don't have to worry about setting padding-right on the li:before.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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: "+";
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;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&lt;/li&gt;
  &lt;li&gt;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&lt;/li&gt;
  &lt;li&gt;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&lt;/li&gt;
  &lt;li&gt;Item 4&lt;/li&gt;
  &lt;li&gt;Item 5&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|761142|text|我更喜欢使用负边距，给你更多的控制权|type|unstyled|depth|inlineStyleRanges|entityRanges|data|761143|ul+{
++margin-left:+0;
++padding-left:+20px;
++list-style:+none;
}

li:before+{
++content:+"*";
++display:+inline;
++float:+left;
++margin-left:+-18px;
}|code-block|syntax|javascript|761144|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I prefer to use negative margin, gives you more control</p>

<pre><code>ul {
  margin-left: 0;
  padding-left: 20px;
  list-style: none;
}

li:before {
  content: "*";
  display: inline;
  float: left;
  margin-left: -18px;
}
</code></pre>


blocks|key|761212|text|Font-a提供了一个开箱即用的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|761213|​|761214|<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>|code-block|syntax|javascript|761215|761216|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>Font-awesome provides a great solution out of the box:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" /&gt;

&lt;ul class='fa-ul'&gt;
  &lt;li&gt;&lt;i class="fa-li fa fa-plus"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam&lt;/li&gt;
  &lt;li&gt;&lt;i class="fa-li fa fa-plus"&gt;&lt;/i&gt; Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|544624|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|544625|​|544626|++++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;
++++}|code-block|syntax|javascript|544627|<!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>|544628|544629|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>try this</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>    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;
    }
    </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
    
    &lt;/head&gt;
    &lt;body&gt;
    
    &lt;p&gt;Example of unordered lists:&lt;/p&gt;
    &lt;ul class="a"&gt;
      &lt;li&gt;Coffee&lt;/li&gt;
      &lt;li&gt;Tea&lt;/li&gt;
      &lt;li&gt;Coca Cola&lt;/li&gt;
    &lt;/ul&gt;
    
    &lt;ul class="b"&gt;
      &lt;li&gt;Coffee&lt;/li&gt;
      &lt;li&gt;Tea&lt;/li&gt;
      &lt;li&gt;Coca Cola&lt;/li&gt;
    &lt;/ul&gt;
    
    &lt;p&gt;Example of ordered lists:&lt;/p&gt;
    &lt;ol class="c"&gt;
      &lt;li&gt;Coffee&lt;/li&gt;
      &lt;li&gt;Tea&lt;/li&gt;
      &lt;li&gt;Coca Cola&lt;/li&gt;
    &lt;/ol&gt;
    
    &lt;ol class="d"&gt;
      &lt;li&gt;Coffee&lt;/li&gt;
      &lt;li&gt;Tea&lt;/li&gt;
      &lt;li&gt;Coca Cola&lt;/li&gt;
    &lt;/ol&gt;
    
    &lt;/body&gt;
    &lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|761277|text|Em破折号样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|761278|ul.emdash+{
++list-style-type:+none;
++list-style-position:+inside;
++text-indent:+-1.25em;
}
ul.emdash+>+li:before+{
++content:+"\2014\00A0";+/*+em+dash+%2B+space*/
}|code-block|syntax|javascript|761279|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Em dash style:</p>

<pre><code>ul.emdash {
  list-style-type: none;
  list-style-position: inside;
  text-indent: -1.25em;
}
ul.emdash &gt; li:before {
  content: "\2014\00A0"; /* em dash + space*/
}
</code></pre>


blocks|key|544733|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|544734|.single-before+{
++list-style:+"";
++list-style-position:+outside!important;
}|code-block|syntax|javascript|544735|<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>|544736|544737|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.single-before {
  list-style: "";
  list-style-position: outside!important;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="single-before"&gt;
  &lt;li&gt; is to manifest perfection already in man.&lt;/li&gt;
  &lt;li&gt; is to bring out the best facets of our students personalities.&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|544781|text|您可以使用::marker伪元素。当您需要为每个列表项使用不同的字符实体时，这很有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|544782|ul+li::marker+{
++content:+"+";+/*+Your+symbol+here+*/
}|code-block|syntax|javascript|544783|​|544784|ul+li:nth-child(1)::marker+{
++content:+"\26BD+++";
}

ul+li:nth-child(2)::marker+{
++content:+"\26C5+++";
}

ul+li:nth-child(3)::marker+{
++content:+"\26F3+++";
}

ul+li::marker+{
++font-size:+20px;
}

ul+li+{
++margin:+15px+0;
++font-family:+sans-serif;
++background:+#BADA55;
++color:+black;
++padding-bottom:+10px;
++padding-left:+10px;
++padding-top:+5px;
}|544785|<ul>
++<li>France+Vs+Croatia</li>
++<li>Cloudy+with+sunshine</li>
++<li>Golf+session+ahead</li>
</ul>|544786|544787|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/::marker^0|5|8|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|12|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|O|3|J|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

<p>You can make use of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::marker" rel="nofollow noreferrer">::marker</a> pseudo element. This is useful in situations when you need to have different character entities for each list item.</p>
<pre><code>ul li::marker {
  content: &quot; &quot;; /* Your symbol here */
}
</code></pre>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>ul li:nth-child(1)::marker {
  content: "\26BD   ";
}

ul li:nth-child(2)::marker {
  content: "\26C5   ";
}

ul li:nth-child(3)::marker {
  content: "\26F3   ";
}

ul li::marker {
  font-size: 20px;
}

ul li {
  margin: 15px 0;
  font-family: sans-serif;
  background: #BADA55;
  color: black;
  padding-bottom: 10px;
  padding-left: 10px;
  padding-top: 5px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;France Vs Croatia&lt;/li&gt;
  &lt;li&gt;Cloudy with sunshine&lt;/li&gt;
  &lt;li&gt;Golf session ahead&lt;/li&gt;
&lt;/ul&gt;</code></pre>
</div>
</div>
</p>


blocks|key|761374|text|在引导程序中，您可以使用class+list-unstyled。然后，你可以使用例如HTML+emoji或其他东西来代替bullet：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|761375|<ul+class="text-dark+display-4+list-unstyled">
++++<li>&#127774;+Phasellus+iaculis+neque</li>
++++<li>&#127803;+Purus+sodales+ultricies</li>
++++<li>&#127774;+Vestibulum+laoreet+porttitor+sem</li>
++++<li>&#127803;+Ac+tristique+libero+volutpat+at</li>
</ul>|code-block|syntax|javascript|761376|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/5.0/content/typography/#lists|1|https://www.w3schools.com/charsets/ref_emoji.asp^0|I|D|C|5|0|16|A|1|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]|$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]|S|$5|N|O|P|E|$Q|T]]]]

<p>In Bootstrap you can use <a href="https://getbootstrap.com/docs/5.0/content/typography/#lists" rel="nofollow noreferrer">class</a> <code>list-unstyled</code>. Then, instead bullet you can use for example <a href="https://www.w3schools.com/charsets/ref_emoji.asp" rel="nofollow noreferrer">HTML emoji</a> or something else:</p>
<pre><code>&lt;ul class=&quot;text-dark display-4 list-unstyled&quot;&gt;
    &lt;li&gt;&amp;#127774; Phasellus iaculis neque&lt;/li&gt;
    &lt;li&gt;&amp;#127803; Purus sodales ultricies&lt;/li&gt;
    &lt;li&gt;&amp;#127774; Vestibulum laoreet porttitor sem&lt;/li&gt;
    &lt;li&gt;&amp;#127803; Ac tristique libero volutpat at&lt;/li&gt;
&lt;/ul&gt;
</code></pre>


blocks|key|544888|text|首先，感谢@Jpsy，因为我的答案就是基于这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|544889|我已经扩展了这个答案，以支持Google+Material+Icons包作为自定义图标。|544890|<link+href="https://fonts.googleapis.com/icon?family=Material%2BIcons"+rel="stylesheet">
<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>|code-block|syntax|javascript|544891|ul+{
++++position:+relative;
++++list-style:+none;
++++margin-left:+0;
++++padding-left:+1.2em;
}

ul+li:before+{
++++font-family:+'Material+Icons';
++++content:+"double_arrow";+/*+Change+this+to+whichever+icon+you+would+like+from+https://fonts.google.com/icons?selected=Material%2BIcons+*/
++++position:+absolute;
++++left:+0;
}

@font-face+{
++++font-family:+'Material+Icons';
++++font-style:+normal;
++++font-weight:+400;
++++src:+url(https://example.com/MaterialIcons-Regular.eot);+/*+For+IE6-8+*/
++++src:+local('Material+Icons'),
++++++local('MaterialIcons-Regular'),
++++++url(https://example.com/MaterialIcons-Regular.woff2)+format('woff2'),
++++++url(https://example.com/MaterialIcons-Regular.woff)+format('woff'),
++++++url(https://example.com/MaterialIcons-Regular.ttf)+format('truetype');
}|544892|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>First, thanks to @Jpsy as my answer is based on that.</p>
<p>I have extended that answer to support the Google Material Icons pack as the custom icon.</p>
<pre><code>&lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot; rel=&quot;stylesheet&quot;&gt;
&lt;ul&gt;
  &lt;li&gt;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.&lt;/li&gt;
  &lt;li&gt;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.&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<pre><code>ul {
    position: relative;
    list-style: none;
    margin-left: 0;
    padding-left: 1.2em;
}

ul li:before {
    font-family: 'Material Icons';
    content: &quot;double_arrow&quot;; /* Change this to whichever icon you would like from https://fonts.google.com/icons?selected=Material+Icons */
    position: absolute;
    left: 0;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
      url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
      url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}
</code></pre>


<p>I realize one can specify a custom graphic to be a replacement bullet character, using CSS attribute:</p>

<pre><code>list-style-image
</code></pre>

<p>And then giving it a URL.</p>

<p>However, in my case, I just want to use the '+' symbol. I don't want to have to create a graphic for that and then point to it. I'd rather just instruct the unordered list to use a plus symbol as the bullet symbol.</p>

<p>Can this be done or am I forced to make it a graphic first?</p>


Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我意识到可以使用CSS属性将自定义图形指定为替换项目符号字符：list-style-image然后给它一个URL。然而，在我的例子中，我只想使用'+‘符号。我不想为它创建一个图形，然后指向它。我宁愿只指示无序列表使用加号符号作为项目符号。这是可以做到的吗?还是我必须先把它做成图形？

问<ul>中<li>元素的自定义项目符号，它是常规字符，而不是图像
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问<ul>中<li>元素的自定义项目符号，它是常规字符，而不是图像EN