HTML列表-样式-类型破折号

有没有一种方法可以在HTML中创建一个带有破折号的列表样式(即-或- –或- —)

<ul>
  <li>abc</li>
</ul>

输出:

- abc

我想到了用像li:before {content: "-"};这样的东西来做这件事，尽管我不知道这个选项的缺点(非常感谢反馈)。

更一般地说，我不介意知道如何为列表项使用通用字符。

当前回答

让我再加上我自己的版本，主要是为了让我再次找到自己喜欢的解决方案:

ul { list-style-type: none; /*use padding to move list item from left to right*/ padding-left: 1em; } ul li:before { content: "–"; position: absolute; /*change margin to move dash around*/ margin-left: -1em; }  Some text <ul> <li>One</li> <li>Very</li> <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li> <li>Approach!</li> </ul>

https://codepen.io/burningTyger/pen/dNzgrQ

2017-01-25 16:12:26

其他回答

你可以像这样设置li::marker:

li::marker {
   content: '- ';
}

2021-02-11 09:34:59

对于今天遇到这个问题的人来说，解决方法很简单:

列表样式:"- "

2017-12-08 11:05:33

当使用键盘上不存在的符号时，请参阅HTML实体并为list-style-type属性使用CSS代码值。关于不同的符号，请参阅HTML字符实体引用中的CSS代码列表。对于键盘上的符号，直接使用键盘符号作为list-style-type属性的值。

参见下面的示例代码:

<！——查看HTML实体的符号不是在键盘上——> <h3>HTML实体:长向右双箭头</h3> <ul style="list-style-type: '\27F9';"> <李>一个李< / > <李>两个李< / > <李> 3 < /李> < / ul > <！——直接使用键盘上的符号——> <h3>键盘上的破折号</h3> <ul style=" font - family:宋体;"> <李>一个李< / > <李>两个李< / > <李> 3 < /李> < / ul >

2022-02-06 18:41:36

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

2017-03-14 18:41:32

下面是一个没有任何相对或绝对位置，也没有文本缩进的版本:

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

喜欢。)

2013-05-12 11:49:15

HTML列表-样式-类型破折号

推荐文章

最新文章

标签