如何在內容元素外面顯示：

在以下情況下，如何使:after生成的文本超出範圍框？（目前，它是內呈現，即它使span元素更寬）如何在內容元素外面顯示：

HTML

<span class="my">Boxtext</span>

CSS

span.my { 
    padding:   4px 8px; 
    background-color: red; 
    display:   inline-block; 
    border-radius:  10px; 
    margin-left:  20px; 
    } 
span.my:after { 
    content:   " text that is supposed to come after the box"; 
    }

我想這有點類似於目錄樣式位置，在那裏你可以選擇內部或外部...

來源

2012-04-09 Ben

我相信CSS內容被認爲是它所呈現的對象的一部分。你可以說:after應該被命名爲:append。

對於你的情況，你可以嘗試把一個額外的元素裏面span.my：

<span class="my"><span>Boxtext</span></span> 
span.my span { ... } 
span.my:after { ... }

或特別造型的內容。

span.my:after { 
    content:   " text that is supposed to come after the box"; 
    background-color: white; 
    position:   absolute; 
    margin-left:  10px; 
}

來源

2012-04-09 18:00:13 Joel

Thx，但第二個解決方案看起來很不愉快，正如你所提到的，由於邊界（-radius）。對於第一種解決方案，我猜這會起作用，但我一直在尋找一種適用於我的原始html的解決方案。 – Ben 2012-04-09 18:04:19

看完這個答案之後，我砍了這個例子：http://jsfiddle.net/cawgZ/ – 2012-04-09 18:04:56

使用絕對定位，你可以使第二個解決方案看起來更好。 http://jsbin.com/ibuqip – Joel 2012-04-09 18:05:17

在::after {}僞元素的CSS只需使用position: absolute：

span.my:after { 
    content: " text that is supposed to come after the box"; 
    position: absolute; 
    left: 100%; 
}

記住，當然，父span.my元素上使用position: relative;（或任何其他position值）。

JS Fiddle demo。

還記得，作爲::after（和::before）僞元素從範圍繼承到它的「連接」，它會繼承width，因此可能需要在CSS中明確覆蓋該/那些元素。

來源

2012-04-09 18:08:58

與其他解決方案相同的問題：http://jsfiddle.net/PMFst/1/ – Ben 2012-04-09 18:20:30

,,,那個問題是..？ – 2012-04-09 18:28:52

如何在內容元素外面顯示：

回答

相關問題