扩展：在元素其余部分的 inline-block 之后答案

【问题标题】：extend :after inline-block for the rest of the element扩展：在元素其余部分的 inline-block 之后
【发布时间】：2011-09-15 17:40:51
【问题描述】：

我有一个带有:before（一个小方块）和:after 的h3 标记，我想要一条延伸到其余宽度的线。

:before 和 :after 都设置为 display:inline-block ，这样我就可以设置宽度和高度。

将width:100% 设置为:after 会换行

看看这里

http://jsfiddle.net/CTd2w/81/

附言我可以使用 JavaScript 解决方案

【问题讨论】：

请记住 :before 和 :after 不支持 IE6 和 IE7。

标签： html css pseudo-element

【解决方案1】：

这是一个不使用:before 和:after 的解决方案。见：http://jsfiddle.net/Wexcode/CTd2w/83/

HTML：

<h3><span>Aktuell</span></h3>

CSS：

h3 {
    border: 0px solid #860d0f;
    border-bottom-width: 1px;
    height: 13px;
}
span {
    background: #fff url(images/logo_square.jpg) 0 50%;
    font-size: 14px;
    color: #860d0f;
    text-transform: uppercase;
    padding: 0 5px 0 14px;
}

【讨论】：

很棒的跨浏览器解决方案，也是一种上移边框的好方法，谢谢

【解决方案2】：

这是一种 hacky JavaScript/jQuery 解决方案，但它确实有效。

http://jsfiddle.net/CTd2w/82/

var h3AfterCalculatedWidth = 
    $('h3').width()        /* total h3 width */
    - $('h3 span').width() /* nested span to determine text width */
    - 14                   /* :before width + margin */ 
    - 5                    /* :after margin */;

$('head').append('<style' + '>h3:after {width: ' + h3AfterCalculatedWidth + 'px!important}<' + '/style>');

!important 应该是不必要的，但无论如何都要包含它

【讨论】：

您应该提到您的代码需要<h3><span>...</span></h3> 才能工作。你有什么理由选择append 而不是css？ $("h3:after").css("width", h3AfterCalculatedWidth + "px");
@Wex 是的，<h3> 元素中嵌套的<span> 有助于识别文本的宽度。关于append 与css - 尝试使用带有:before 和:after 伪代码的jQuery 选择器在我看来是行不通的，所以添加<style> 块是我的替代方案

【解决方案3】：

当您在元素上设置 display:inline-block 时，该元素的宽度会变得与格式化元素所需的一样大，除非元素设置了其宽度，在这种情况下该算法不适用 -你设置宽度，就是这样。在 CSS 规范中查找“缩小以适应算法”以获取完整的详细信息。所以当你说 width:100% 时，你保证换行。

不确定能否解决这个问题...

【讨论】：