Question

So I have this html:

<p>here is some <span>random</span> content that I might use</p>​

and this css:

span{
    position: relative;
}

span:before{
    content: 'this is more content';
    position:absolute;
    color: red;
    top: -15px;
}

What happens is, the content added with css inherits the width of the span (the word ‘random’). is there a way to remove the inherited width without adding a width value to override the inheritance

here is the demo http://jsfiddle.net/7dBbZ/1/
Thanks
​

Answer 1

What you’re looking for is white-space:nowrap; since the element is rendered with display:inline. It doesn’t actually inherit width, as BoltClock has pointed out it is not an implicitly inherited property, but rather fills the parent element with wrapping allowed.

http://jsfiddle.net/7dBbZ/5/

Try playing with different values for content and see for yourself (i.e. with text shorter than the parent element, text without spaces etc.)