无序列表中项目符号前的文本

Question

创建 html 无序列表 <ul> 时是否可以在项目符号前添加文本？我想要达到的结果看起来类似于：

T1 * 更多文字 1

T2 * 更多文字 2

T3 * 更多文字 3

其中 * 是 ul.I 中的项目符号几乎到处都在搜索，但我似乎找不到任何东西，也不知道从哪里开始。我尝试在 li 之前添加文本，但结果不是我所期望的：

T1

text1

T2

text2

T3

text3

Answer 1

这里有一个使用 CSS 的简单方法。首先，删除当前项目符号：

li{
list-style-type: none;
}

然后，在每个列表项之前，添加您要添加的内容，后跟一个项目符号。像这样：

ul li:before{
content: 'hi 22';
}

希望对您有所帮助！

DEMO

Answer 2

你能尝试同时为文本和 li 显示内联吗？我希望这会有所帮助

Answer 3

在这里使用 :before 伪将限制不同文本的使用。在项目符号之前用一些标签包裹您需要的文本将使为其提供适当的类变得更容易。

检查此 JsFiddle 以获取工作示例。

Answer 4

<ul>
  <span style="float: left; margin-right: 20px;">Hi!</span><li> Hello</li>
  <span style="float: left; margin-right: 20px;">Hi!</span><li> Hello</li>
  <span style="float: left; margin-right: 20px;">Hi!</span><li> Hello</li>
  <span style="float: left;margin-right: 20px;">Hi!</span><li> Hello</li>
</ul>

http://codepen.io/anon/pen/RPbgmR

Answer 5

你可以这样做 CSS 计数器和一个伪元素。

CSS Counters @ MDN

ul {
  list-style-type: none;
  counter-reset: section;
}
li:before {
  counter-increment: section;
  content: "T"counter(section)". ";
}

<ul>
  <li>Some Text</li>
  <li>Some Text</li>
  <li>Some Text</li>
  <li>Some Text</li>
  <li>Some Text</li>
</ul>

无序列表中项目符号前的文本

Text before bullet in unordered list

html

css

jquery

html-lists