CODEWITHSUNDEEP
csspseudo-element
wheresrhys
wheresrhys

Reputation: 23560

Styling part of pseudo-element

Is there some way I can target CSS styles at just part of the content of the :before and :after pseudo-elements?

Upvotes: 1

Views: 136

Answers (2)

BoltClock
BoltClock

Reputation: 724452

If your :before pseudo-element content is displayed inline along with the content of the generating element, you can still target :first-line or :first-letter separately and it should override :before for the first line or letter of the generated content, respectively:

div {
    width: 100px;
}

div:before {
    content: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.';
}

div:first-line { font-weight: bold; }
div:first-letter { color: red; }

Beyond that, you can't reliably target parts of :before or :after pseudo-elements with CSS, as pseudo-elements cannot generate other pseudo-elements in CSS2.1, only real elements can. If you need to style the first letter of appended content, use JavaScript to append that content first.

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

I don't understand when you say just part of a pseudo-element. To target styles for :after and :before treating them as block elements, the basic thing you need to have is:

.element:after, .element:before {
    content: " ";
    display: block;
    width: 100px;
    height: 100px;
}

Upvotes: 0

Related Questions