扩展：在元素的其余部分的内联块之后

| 我有一个带有:before（一个小正方形）的h3标签，而作为:after，我想要一条延伸其余宽度的线。 :before和the2ѭ都设置为to5ѭ，所以我可以设置宽度和高度。将ѭ6设置为:after会换行看看这里 http://jsfiddle.net/CTd2w/81/ ps。我对JavaScript解决方案感到满意

已邀请:

3 个回复

坝硷操

这是不使用: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;
}

摊揉售

这是一种有点怪异的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应该没有必要，但无论如何都要包括在内

凄嘛姥

在元素上设置display：inline-block时，该元素的宽度将与设置元素格式所需的宽度一样大，除非该元素设置了其宽度，在这种情况下该算法不适用-您可以设置宽度，就是这样。在CSS规范中查找“缩小以适合算法”以获取全部详细信息。因此，当您说width：100％时，您可以保证换行。不确定是否可以解决此问题...

要回复问题请先登录或注册

扩展：在元素的其余部分的内联块之后

3 个回复

发起人

pseudo_element

html

css

问题状态

扩展：在元素的其余部分的内联块之后

与内容相关的链接

3 个回复

发起人

pseudo_element

html

css

问题状态