CODEWITHSUNDEEP
jquerycss
Julian Camilleri
Julian Camilleri

Reputation: 3105

::first-line pseudo element (not appearing)

I have this following code:

   <div id="slide1">            
   <span id="tf1">BUILDING WEBSITES<br>BLABLABLABLA</span>
   </div>

and this CSS:

#tf1 {
color: #505050; 
text-shadow: #a8a8a8 -2px 1px 0px; 
font-size: 40px; 
font-family: Arial, Helvetica, sans-serif;
}
#tf1::first-line {
color: #FFFFFF; 
text-shadow: #000 1px 1px 1px; 
font-size: 60px; 
font-family: Arial, Helvetica, sans-serif;
}
#slide1 {
position: absolute; 
padding: 20px; 
width: 700px;
}

Everything seems fine to me; except the fact that ::first-line is not appearing and everything is appearing as coded in the #tf1 section in my CSS code.

Any ideas of what is overriding this? or if there is a bug in my code?

Upvotes: 0

Views: 61

Answers (3)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

This pseudo-element only works on block-level elements (when display is set to either block, inline-block, table-caption, table-cell). If set on an inline element, nothing happens, even if that inline element has a line break within it.

#tf1 {
color: #505050; 
text-shadow: #a8a8a8 -2px 1px 0px; 
font-size: 40px; 
font-family: Arial, Helvetica, sans-serif;
display: block; /* assign display property value*/
}

source

Upvotes: 0

Ming
Ming

Reputation: 4588

::first-line only works with block style elements. a span is by default inline, so the entire thing is "one line", as in, it's one continuous line that just keeps going on and on and wraps when it meets a boundary.

You can set the span to display: block; to get ::first-line to work:

http://jsfiddle.net/hwmWv/

#tf1 {
    display: block;
}

Upvotes: 2

Felix
Felix

Reputation: 38102

You need to add:

#tf1 {
    display: block;
}

since span has default display: inline style and from the docs about ::first-line:

A first line has only meaning in a block-container box, therefore the ::first-line pseudo-element has only an effect on elements with a display value of block, inline-block, table-cell or table-caption. In all other cases, ::first-line has no effect.

Updated Fiddle

Upvotes: 4

Related Questions