元素外部的CSS伪元素复选标记

我正试图通过CSS创建一个带有背景色的复选框。我的HTML看起来像：

<div class="filter-group">
    <!---some label--->
    <ul class="filter-options scrollable">
        <li class="filter-facet"><span class="label-text">Foo 1 </span><span class="muted count">(101)</span></li>
        <!--other items-->
    </ul>
</div>

2） 内联

当我不设置

display

时，它会默认设置为

inline

，这意味着我不能再设置

宽度

或

高度

。选中标记显示在元素内部，但取消选中该框会使元素收缩为零。我试着加入一些不间断的空格（

\00A0

），但即使它真的起作用，也会显得有点凌乱

我可以控制

内联
元素的宽度/高度吗？

.filter-facet::before {
    background-color: lightblue;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 5px 0 0;
    vertical-align: text-top;
    border: 1px solid black;
}

.filter-facet:not(.filtered)::before {
    content:'\2713';
    text-shadow: 1px 1px 1px black;
}

.filter-facet.filtered::before {
    content:'';
}

.filter-facet::before {
    background-color: lightblue;
    /*display: inline-block;*/ /*inline by default*/
    width: 1em; /*ignored, since it's inline*/
    height: 1em; /*ignored, since it's inline*/
    margin: 0 5px 0 0;
    vertical-align: text-top;
    border: 1px solid black;
}

.filter-facet:not(.filtered)::before {
    content:'\2713';
    text-shadow: 1px 1px 1px black;
}

.filter-facet.filtered::before {
    content:'\00A0\00A0'; /*trying to outsmart it... failed =)*/
}

3） 内联块（引导2）

最后，更糟糕的是，我使用的是Bootstrap 2.3.2。当我包含用于引导的CSS时，复选标记将完全消失（如果没有引导，它将显示在元素外部）

为什么复选标记会消失？

.filter-facet::before {
    background-color: lightblue;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin: 0 5px 0 0;
    vertical-align: text-top;
    border: 1px solid black;
}

.filter-facet:not(.filtered)::before {
    content:'\2713';
    text-shadow: 1px 1px 1px black;
}

.filter-facet.filtered::before {
    content:'';
}

.filter-facet::before {
    background-color: lightblue;
    /*display: inline-block;*/ /*inline by default*/
    width: 1em; /*ignored, since it's inline*/
    height: 1em; /*ignored, since it's inline*/
    margin: 0 5px 0 0;
    vertical-align: text-top;
    border: 1px solid black;
}

.filter-facet:not(.filtered)::before {
    content:'\2713';
    text-shadow: 1px 1px 1px black;
}

.filter-facet.filtered::before {
    content:'\00A0\00A0'; /*trying to outsmart it... failed =)*/
}



/*
*使用引导使复选标记消失
*也就是说，在jsFiddle中使用follow外部资源，或者从html中取消CSS的注释
*//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
*/
$（“.filter facet”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
变量$filterFacet=$（此）；
$filterFacet.toggleClass（“过滤”）；
});
。过滤器组{
填充顶部：10px；
垫底：5px；
字体大小：14px；
}
.过滤器标签：悬停{
颜色：#005580；
光标：指针；
}
.过滤器选项{
列表样式类型：无；
保证金：0px 0px 0px 11px；
}
.filter-options.scrollable{
最大高度：200px；
溢出y：自动；
}
.过滤面{
保证金：0；
显示：块；
字体大小：14px；
/*文本索引+左填充=0，
*另请参见.filter options输入[type=“checkbox”]{margin}*/
文本缩进：-19px；
左侧填充：19px；
光标：指针；
不透明度：1.0；
}
.过滤器选项.计数{
字体大小：较小；
}
.filter方面：：之前{
背景颜色：浅蓝色；
显示：内联块；
宽度：1米；
高度：1米；
边距：0 5px 0 0；
垂直对齐：文本顶部；
边框：1px纯黑；
}
.filter方面：未（.filtered）：：之前{
内容：'\2713'；
文本阴影：1px 1px 1px黑色；
}
.filter facet.filtered:：before{
内容：''；
}

一些过滤器

Foo 1（101）
Foo 2（38）
Foo 3（38）
Foo 4（13）
Foo 5（259）
Foo 6（537）
Foo 7（21）
Foo 8（567）
Foo 9（567）
Foo 10（8）
Foo 11（192）

它的原因是
类中的文本缩进

.filter-facet {
    margin: 0;
    display: block;
    font-size: 14px;
    /* text-index + padding-left = 0,
     * also see .filter-options input[type="checkbox"] {margin}*/
    text-indent: -19px; /* Remove this css rule */
    padding-left: 19px;
    cursor: pointer;
    opacity: 1.0;
}

这是截图

嗯，我只是回答电话号码1案例：

由于
：：before
元素中的文本标识，标记会向左移动。您可以轻松地将其文本对齐设置为
文本对齐：right
，以便内容（勾号）位于方框内：


/*
*使用引导使复选标记消失
*也就是说，在jsFiddle中使用follow外部资源，或者从html中取消CSS的注释
*//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
*/
$（“.filter facet”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
变量$filterFacet=$（此）；
$filterFacet.toggleClass（“过滤”）；
});
。过滤器组{
填充顶部：10px；
垫底：5px；
字体大小：14px；
}
.过滤器标签：悬停{
颜色：#005580；
光标：指针；
}
.过滤器选项{
列表样式类型：无；
保证金：0px 0px 0px 11px；
}
.filter-options.scrollable{
最大高度：200px；
溢出y：自动；
}
.过滤面{
保证金：0；
显示：块；
字体大小：14px；
/*文本索引+左填充=0，
*另请参见.filter options输入[type=“checkbox”]{margin}*/
文本缩进：-19px；
左侧填充：19px；
光标：指针；
不透明度：1.0；
}
.过滤器选项.计数{
字体大小：较小；
}
.filter方面：：之前{
背景颜色：浅蓝色；
显示：内联块；
宽度：1米；
高度：1米；
边距：0 5px 0 0；
垂直对齐：文本顶部；
边框：1px纯黑；
}
.filter方面：未（.filtered）：：之前{
内容：'\2713'；
文本阴影：1px 1px 1px黑色；
文本对齐：右对齐；
}
.filter facet.filtered:：before{
内容：''；
}

一些过滤器

Foo 1（101）
Foo 2（38）
Foo 3（38）
Foo 4（13）
Foo 5（259）
Foo 6（537）
Foo 7（21）
Foo 8（567）
Foo 9（567）
Foo 10（8）
Foo 11（192）

1:将以下行添加到您的
.filter facet:：before
样式中：

text-indent: 0;
line-height: 1;
text-align: center;

第一行将从框中继承的文本缩进值恢复为默认值零，将文本返回框中。另外两行通过将角色放置在框中心来美化外观

编辑的JSFIDLE示例：

2：不是直接的。根据，忽略内联元素的宽度/高度
。内联元素的大小取决于它们的字体（不仅仅是
字体大小
，还取决于字体本身，具有相同
字体大小
的不同字体可能需要dif