CSS3 里通过伪元素添加内容的时候，如何连续输出多个空格？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 3002 天前的主题，其中的信息可能已经有所发展或是发生改变。

比如这个，我想在 li 标签前面加些特殊符号，类似 list-style 的效果

.demo ul li::before{
content: "\20\20\20\2022\20\20\20";
color: #FFAF00;
}

但是 content 里面的内容无法输出多个空格，在页面上看一个空格也没有，只有一个“·”。

其实我只是想让这个插进去的内容多撑一点空间而已，就像“ · ”，请问这种情况如何解决？

nbsp

空格

content

list-style

15 条回复 • 2016-09-01 16:49:21 +08:00

lxrmido

2016-09-01 13:40:06 +08:00

content:"\00A0\00A0\00A0\00A0";

FrankFang128

2016-09-01 13:44:04 +08:00 via Android

display inline block
width 随便设

别用空格做排版。。。

learnshare

2016-09-01 14:03:21 +08:00

@FrankFang128 是的

空格的宽度不确定，用来排版是个坑

hkongm

2016-09-01 14:17:13 +08:00

padding 或者 width

jmyz0455

2016-09-01 14:58:01 +08:00

@learnshare @FrankFang128 明白，既然说到排版，我有个问题想继续请教下去

很多时候要输入用户姓名，经常遇到只有一个字的姓，比如

<li><span>小明</span></li>
<li><span>小小明</span></li>

li 比 span 肯定要宽很多， span 里面是左对齐。平时我都是用空格排版的，这种情况怎么做好呢？

FrankFang128

2016-09-01 14:59:21 +08:00 via Android

如果上面三个字，下面四个字，你要怎么对齐

jmyz0455

2016-09-01 15:04:04 +08:00

@FrankFang128 @hkongm @learnshare @lxrmido 对了有个奇怪的问题，这些特殊符号可以弄大一点吗？比如这个小圆点 content: "\2022"; 放大到直径 4px ？

newbieo0O

2016-09-01 15:06:37 +08:00

@FrankFang128 &emsp; &ensp;

FrankFang128

2016-09-01 15:07:04 +08:00 via Android

@jmyz0455 iconfont 或者换字体

jmyz0455

2016-09-01 15:08:02 +08:00

@FrankFang128 这种情况我也遇到过，是类似于：

文员
设计师
项目经理
信号工程师

当时设计师跟我说就两个字的塞两个空格，比三个字长的一概不管，于是我就强行塞  

newbieo0O

2016-09-01 15:12:50 +08:00

@jmyz0455
@FrankFang128
教你们一招 http://codepen.io/anon/pen/ALBjKg

FrankFang128

2016-09-01 15:14:53 +08:00 via Android

显然这是设计师的问题

对其没有一致性

用 after 做 justify text

learnshare

2016-09-01 15:30:55 +08:00

@jmyz0455 小圆点可以用 CSS 来写，爱写多大写多大。

不同长度的字，可以考虑右对齐，或者两端对齐。

exoticknight

2016-09-01 15:35:26 +08:00

不是很复杂的情况下用 &emsp; &ensp; 也是行的

jmyz0455

2016-09-01 16:49:21 +08:00

@newbieo0O 有现成案例真好，完全明白了谢谢