开发者

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:

  1. 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;
    }
    
  2. 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: ')'; }
    
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜