CSS pseudo-element to apply the first character of an element
I have the following content in my h1 tag: "(Hello World)" so I add the following to my css to change the first character of this element:
h1:first-letter { font-size:63px; color:#510007; font-family:Helvetica; }
But, as I noticed, first开发者_运维百科-letter is only for letters, so is there any workarounds to apply this style to the first char? Which in this case is "(".
From the spec:
Punctuation (i.e, characters defined in Unicode [UNICODE] in the "open" (Ps), "close" (Pe), "initial" (Pi). "final" (Pf) and "other" (Po) punctuation classes), that precedes or follows the first letter should be included
So your bracket and the letter H are selected by :first-letter
, because (
is considered a punctuation symbol, not a letter.
There are two workarounds:
Wrap your opening bracket in
span
tags:<!-- To style both (), wrap both in <span> tags --> <h1><span>(</span>Hello World)</h1>
and target
h1 span
:h1 span { font-size: 63px; color: #510007; font-family: Helvetica; }
Drop the brackets from your text:
<h1>Hello World</h1>
and use
:before
and/or:after
instead (not supported in IE7 and older):/* To style both (), use h1:before, h1:after */ h1:before { font-size: 63px; color: #510007; font-family: Helvetica; } h1:before { content: '('; } h1:after { content: ')'; }
精彩评论