CSS Pseudo-Element Checkmark

Checkmark doesn't line up with the box. Also, Bootstrap makes the checkmark disappear.

HTML

<div class="filter-group selected">
    <span class="filter-label">
        <span class="label-text"> Some Filter</span>
    </span>
    <ul class="filter-options scrollable">
        <li class="filter-facet"><span class="label-text">Foo 1 </span><span class="muted count">(101)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 2 </span><span class="muted count">(38)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 3 </span><span class="muted count">(38)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 4 </span><span class="muted count">(13)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 5 </span><span class="muted count">(259)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 6 </span><span class="muted count">(537)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 7 </span><span class="muted count">(21)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 8 </span><span class="muted count">(567)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 9 </span><span class="muted count">(567)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 10 </span><span class="muted count">(8)</span></li>
        <li class="filter-facet"><span class="label-text">Foo 11 </span><span class="muted count">(192)</span></li>
    </ul>
</div>

CSS

.filter-group {
    padding-top: 10px;
    padding-bottom: 5px;
    font-size: 14px;
}

.filter-label:hover {
    color: #005580;
    cursor: pointer;
}

.filter-options {
    list-style-type: none;
    margin: 0px 0px 0px 11px;
}

.filter-options.scrollable {
    max-height: 200px;
    overflow-y: auto;
}

.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;
    padding-left: 19px;
    cursor: pointer;
    opacity: 1.0;
}

.filter-options .count {
    font-size: smaller;
}

.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;
    text-indent: 0;
    line-height: 1;
    text-align: center;
}

.filter-facet:not(.filtered)::before {
    content: "X";
    text-shadow: 1px 1px 1px black;
    /*color: white*/
}

.filter-facet:(.filtered)::after {
     content:'\2713';
}
.filter-facet.filtered::before {
    content:'';
}

JavaScript

/*
 * Using Bootstrap makes checkmark disappear
 * i.e. use the follow external resource in jsFiddle
 * //netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css
 */

$(".filter-facet").on("click", function (e) {
    e.preventDefault();

    var $filterFacet = $(this);
    $filterFacet.toggleClass("filtered");
});