内联块删除了我在内容中的第一个空格：之前

Question

这是我的代码：http://jsfiddle.net/ykcxb8hL/1/

基本上我需要在我的测试元素上添加内联块，但是当我这样做时，它会删除我内容中的第一个空格

 .test:before {content: " hello ";}
.test {display: inline-block;}

是否有任何解决方案，理想情况下无需放置内容：在它之前的项目之后呢？

詹姆斯

Answer 1

试试吧

This is a <span class="test">World</span>

Answer 2

使用CSS属性text-indent怎么样？

添加到.test {display:inline-block}这个：text-indent:5px

选择所需像素的值，甚至选择％

它的基本支持是跨浏览器

有关此属性的更多信息，请在此处查看：

TEXT-INDENT

Answer 3

你想要下面给出的东西吗？

.test：在{content：“\ a0hello”;}之前 .test {display：inline-block;}

Answer 4

您可以使用text-indent：

.test:before {
    content: "hello";
    display: inline-block;
    text-indent: 5px;
}

请参阅this fiddle。

否则使用unicode空间：

.test:before { content: "\00a0hello"; }