css - 如何制作缩进列表并使用双箭头作为我的角色

标签 css

<分区>

我有一个列表,我希望它看起来像这样:

» Hello here is a line that
  breaks
» Hello here is a line that
  breaks
» Hello here is a line that
  breaks

我使用 :before 添加双箭头:

li{
  width: 80px;
}
li:before {
  content: "\0273";
}

这会产生一个如下所示的列表:

» Hello here is a line that
breaks
» Hello here is a line that
breaks
» Hello here is a line that
breaks

我怎样才能缩进第二行呢?我不想使用图像。

最佳答案

尝试这样的事情:

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

li {
  padding-left: 16px;
  text-indent: -14px;
    width: 100px;
}

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

Here's a fiddle

关于css - 如何制作缩进列表并使用双箭头作为我的角色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33164204/

上一篇:html - 单击时输入字段的奇怪扩展错误

下一篇:javascript - 完成步骤后,在 bootstrap Accordion 中添加 TICK 而不是 plus

相关文章:

html - 影响文本的CSS不透明度过渡

css - 如何为不同的主题提供 Vaadin 插件 @StyleSheets

css - 这种 CSS 技术有名字吗?

jquery - jQuery 脚本的错误行为

html - 旋转木马指示器 bootstrap 4 不采用 css 样式

javascript - 我的 javascript 触发器无法在我的代码中使用 css 媒体查询

css - compass - 从 Sprite 位置获取个人编号

css - 将背景图像添加到垫卡

javascript - 在 jquery 不起作用的 html 表中对列进行排序和分页

javascript - 更改 CSS3 动画的开始