html - 使用 display flex 删除之前的下划线

Question

我有一个页脚菜单，其中包含链接列表，在 :before 中带有 V 形。我希望人字形清除下面的空间(就像在我的示例中一样)，并将链接整齐地列在右侧。问题是由于显示:flex，我无法将其与人字形上已删除的下划线结合使用。要么 V 形不清晰但没有下划线，要么 V 形清晰且带下划线。有谁知道如何使用 CSS 实现这两者？

我包括了 2 个示例:第一个有正确的清除，第二个应该删除人字形中的下划线，但这只适用于 chrome。

CSS:

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.footerblock1 li a {
    color: #535353;
    display: flex;
}

.footerblock1 li a:before {
    position: relative;
    left: 0;
    font-family: 'FontAwesome';
    font-weight: normal;
    margin-right: 8px;
    content:"\f105";
    text-decoration: none;
    display: inline-block;
}

.footerblock2 li a {
    color: #535353;
    display: flex;
}

.footerblock2 li a:before {
    position: relative;
    left: 0;
    font-family: 'FontAwesome';
    font-weight: normal;
    margin-right: 8px;
    content:"\f105";
    text-decoration: none;
    display: inline-table;
}

HTML:

<div class="col-sm-6 col-md-4 footerblock1">
    <div class="well well-lg">
        <h2>Footerhead 1</h2>
        <ul class="list-unstyled">
            <li><a href="#">Footerlink</a></li>
            <li><a href="#">Footerlink Footerlink Footerlink Footerlink Footerlink Footerlink Footerlink</a></li>
            <li><a href="#">FooterlinkFooterlink Footerlink Footerlink Footerlink Footerlink</a></li>
        </ul>
    </div><!--Well-->
</div> <!--col-sm-6-->

<div class="col-sm-6 col-md-4 footerblock2">
    <div class="well well-lg">
        <h2>Footerhead 1</h2>
        <ul class="list-unstyled">
            <li><a href="#">Footerlink</a></li>
            <li><a href="#">Footerlink Footerlink Footerlink Footerlink Footerlink Footerlink Footerlink</a></li>
            <li><a href="#">FooterlinkFooterlink Footerlink Footerlink Footerlink Footerlink</a></li>
        </ul>
    </div><!--Well-->
</div> <!--col-sm-6-->

JSFIDDLE:

http://jsfiddle.net/0h4zft7u/2/

Answer 1

谢谢大家的回答!我设法让它与以下 CSS 一起工作:

    .list-unstyled {
        padding-left: 0;
        list-style: none;
    }

    .footerblock1 li a {
        color: #535353;
        display: block;
        position: relative;
        padding-left: 15px;
    }

    .footerblock1 li a:before {
        position: absolute;
        left: 0;
        font-family: 'FontAwesome';
        font-weight: normal;
        margin-right: 8px;
        content:"\f105";
        text-decoration: none;
    }

fiddle :

http://jsfiddle.net/0h4zft7u/6/