CODEWITHSUNDEEP
csscss-selectors
Nida
Nida

Reputation: 1702

Border Radius using the :first line selector?

I have the following in my HTML:

<p class="caption">Lorem Ipsum is a dummy text.It is used to display text in web page.</p>

In my CSS:

.caption:first-line
{ 
background-color:green;
border-radius:4px;
padding:5px 10px;
}

Only background-color gets applied to the first line and rest of the styling is omitted. Can anyone help?

Upvotes: 2

Views: 506

Answers (4)

Robert McKee
Robert McKee

Reputation: 21477

The border-radius and padding aren't supported on the first-line pseudo element. This is about as close as I could get to what you had if I interpretted what you were looking for. I added a line-height to make the vertical "padding", and a :before element to indent the line (left padding), but I could not figure out a neat way to do right pad only the first line. Nor could I figure out what you wanted to do with the border radius, but I put it on the caption anyway. It currently has no discernible effect.

.caption:first-line
{ 
background-color:green;
line-height: 50px;
}
.caption{
    border-radius:4px;
}
.caption:before{
    content:' ';
    width:10px;
    height: 5px;
    float:left;
}

Upvotes: 0

SP Singh
SP Singh

Reputation: 438

Please use vender prefix for border radius and put first line into a separate tag like span,p etc.

<p class="caption">
     <span>Lorem Ipsum is a dummy text.It is used to display text in web page.</span></p>


.caption span
{ 
     background-color:green;
     -webkit-border-radius: 4px;
     -moz-border-radius : 4px;
     border-radius:4px;
     padding:5px 10px;
}

Upvotes: -1

dsgriffin
dsgriffin

Reputation: 68616

That is because border-radius and padding are not supported properties of the :first-line selector.

The following quote is taken from the MDN documentation:

Only a small subset of all CSS properties can be used inside a declaration block of a CSS ruleset containing a selector using the ::first-line pseudo-element:

all font-related properties: font, font-style, font-variant, font-weight, font-size, line-height and font-family.

The color property, all background-related properties: background-color, background-image, background-position, background-repeat, background-size, and background-attachment, word-spacing, letter-spacing, text-decoration, text-transform, and line-height.

Upvotes: 6

Adrift
Adrift

Reputation: 59829

From Selectors Level 3, 5.12.1:

The :first-line pseudo-element is similar to an inline-level element, but with certain restrictions. The following properties apply to a :first-line pseudo-element: font properties, color property, background properties, 'word-spacing', 'letter-spacing', 'text-decoration', 'text-transform', and 'line-height'. UAs may apply other properties as well.

Unfortunately border-radius isn't one of the supported properties for the ::first-line pseudo-element.

Upvotes: 2

Related Questions