为 < ul > 中的 < li > 元素自定义符号，该符号是正则字符，而不是图像

我意识到一个人可以使用 CSS 属性指定一个自定义图形作为替换项目符号:

list-style-image

然后给它一个 URL。

但是，在我的示例中，我只想使用’+’符号。我不想创建一个图形，然后指向它。我宁愿指示无序列表使用加号作为子弹符号。

这是可以做到的，还是我必须先做一个图形？

346941 次浏览
小开

可以使用 :before伪选择器在列表项前插入内容。你可以在 Quirksmade 的 http://www.quirksmode.org/css/beforeafter.html上找到一个例子。我用这个插入大的引号周围的块引号..。

高温。

小开
最佳答案

以下引自 < em > 驯服名单 :

可能有时候您有一个列表，但是您不想要任何项目符号，或者您想使用其他字符来代替项目符号。同样，CSS 提供了一个简单的解决方案。只需将 list-style: none; 添加到您的规则中，并强制使用挂起缩进显示 LI。规则是这样的:

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

需要将填充或边距设置为零，将另一个设置为1em。根据您选择的“项目符号”，您可能需要修改此值。否定的文本缩进将导致第一行向左移动该数量，从而创建一个悬挂缩进。

HTML 将包含我们的标准 UL，但使用您希望用来替代列表项目内容前面的项目符号的任何字符或 HTML 实体。在我们的例子中，我们将使用“ ，右双角引号:”。

第一项
第二项
第三项
第四项
第五项
稍微长一点，这样
会包起来的

小开

这是一个很晚的答案，但是我刚刚发现了这个... 为了在任何包装的行上获得正确的缩进，试试这种方法:

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


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


li:before {
content: "+";
padding-right: 5px;
}
小开

这是 W3C 解决方案，适用于 Firefox，Chrome 和 Edge。

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>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

你也可以内联使用这个样式。将单引号 '和双引号 "组合起来以避免冲突:

<ul style="list-style-type: '🔔 ';">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

如果你不能冒险在源代码中编写 unicode，你仍然可以在 list-style-type中设置 HTML 实体(即: &#x1F514;) ，它将被正确地呈现(即: 🔔)-运行代码片段来尝试它。

<ul style="list-style-type: '&#x1F514; ';">
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>

小开

建议对 <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;
}
小开 

.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>

小开

这是我目前为止找到的最好的解决方案。它工作得很好，而且是跨浏览器的(IE8 +)。

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.2 em 是你想要的字符宽度，根据你的需要改变它。

小开

我的解决方案使用定位来获得包装线自动正确排列。所以您不必担心在 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>

小开

我喜欢用负边距，给你更多的控制权

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


li:before {
content: "*";
display: inline;
float: left;
margin-left: -18px;
}
小开

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>

小开

试试这个

    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>

小开

有趣的是，我并不认为任何一个发布的解决方案是足够好的，因为他们依赖于使用的字符是1em 宽，这并不需要如此(也许除了 John Magnolia 的回答，然而使用浮点数可以使事情变得更复杂)。下面是我的尝试:

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;任何你喜欢的。例如，你可以尝试 颜色: 红色; 文本对齐: 右; 右边填充: 5px; 盒子尺寸: 边框; 或者如果你不喜欢使用边框，只需要从宽度中减去填充(5px)(例如宽度: 25px)。有很多选择。
  4. 它不使用浮点数，因此可以包含在任何地方。

好好享受吧。

小开

这么多解决方案。
但我仍然认为还有改进的空间。

优点:

  • 非常紧凑的代码
  • 可以使用任何字体大小 < br > (不包含绝对像素值)
  • 将行完美地 < br > 对齐(第一行和后面的行之间没有轻微的移位)

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>

小开

短横线风格:

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

.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>

小开

您可以使用 翻译: 马克伪元素。这在需要为每个列表项提供不同字符实体的情况下非常有用。

正如@Kal 提到的，在编辑时，Safari 不支持 ::marker上的内容。

ul li::marker {
content: " "; /* Your symbol here */
}


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;
}
<ul>
<li>France Vs Croatia</li>
<li>Cloudy with sunshine</li>
<li>Golf session ahead</li>
</ul>

小开

在 Bootstrap 中，你可以使用 同学们 list-unstyled。然后，你可以使用子弹，例如 HTML 表情符号或其他东西:

<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>
小开

首先，感谢@Jpsy，因为我的答案就是基于此。

我已经扩展了这个答案，以支持谷歌材质图标包作为自定义图标。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 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>

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+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');
}
小开

虽然不是最好的答案，但我喜欢简洁的 css。

ul { list-style-type: '\002B\00a0\00a0'; }

Unicode for + : 002B

空白区的 unicode: 00a0

您可以在 Unicode 中搜索其他符号，并只添加空白，直到您对定位感到满意为止。

附注: 有人给出了几乎相同的答案，但我不能对此作出评论。


提交答案