Jak zastosować CSS do pierwszej litery po: przed treścią?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<style type="text/css"> 
p:before { 
    content:"Former - "; 
    color:red; 
    font-family:"Tahoma" ,Times New Roman; 
    font-size:70%; 
} 

p.normal:first-letter { 
    font-size:40px; 
    color:blue; 
} 
</style> 
</head> 
<body> 
    <p class="normal">First character of this paragraph will 
    be normal and will have font size 40px;</p> 
</body> 
</html>

Tutaj zawartość w pseudo-elementu :before wyświetla na czerwono, ale chcę też styl znak „F” o „F irst charakteru niniejszego ustępu” w kolorze niebieskim. Ale zamiast tego widzę "F" z "F ormer -" na niebiesko.Jak zastosować CSS do pierwszej litery po: przed treścią?

Co chcę jest do zastosowania zarówno :before i pierwszą literę .normalpo zawartość do tego samego paragrafu :before. czy to możliwe? Jeśli tak to jak?

Źródło

2012-07-29 swati16

Jaka część Twojego pytania prowadzi się spodziewać * żadnych * książkę lub witrynę, nazw jako odpowiedź? A które "F"? Ten w "Dawnym" lub w "Pierwszym"? –

* wyświetla "Pierwszy" z "F" *? Co to znaczy? Czy nie miałeś na myśli "F" z "First"? –

możliwy duplikat [selektora css: pierwsza litera pierwszego akapitu wewnątrz div] (http://stackoverflow.com/questions/5721730/css-selector-first-paragraphs-first-letter-inside-a-iv) –

Zwykle można to zrobić za pomocą pseudo-elementu :first-letter, ale skoro masz :before zawartości, co inserts text before the actual content of your paragraph, to zamiast pierwszej litery rzeczywistej zawartości, :first-letter pasowałby pierwszą literę treści :before zamiast.

Oznacza to, że zamiast tego:

<p class="normal"> 
    <p:before>Former - </p:before> 
    <p.normal:first-letter>F</p.normal:first-letter>irst character of this paragraph will 
    be normal and will have font size 40px; 
</p>

rzeczywiście dostać to:

<p class="normal"> 
    <p:before> 
    <p.normal:first-letter>F</p.normal:first-letter>ormer - 
    </p:before> 
    First character of this paragraph will 
    be normal and will have font size 40px; 
</p>

Ze względu na to, jak CSS generowane prace treści, nie sądzę, że jest to rozwiązanie w czystym CSS osiągnąć pierwszą literę rzeczywistej zawartości po wprowadzeniu treści przed nią.

Jako alternatywę można użyć span zamiast pseudo-elementu :first-letter, do których można następnie zastosować kolor niebieski, ale to oznacza, że trzeba wstawić dodatkowe elementy:

<p class="normal"><span>F</span>irst character of this paragraph will 
    be normal and will have font size 40px;</p>

p.normal span { 
    font-size:40px; 
    color:blue; 
}

Źródło

2012-07-29 15:27:54 BoltClock

-1

<!DOCTYPE html> 
<html lang="en"> 
    <head> 

    <title>Complicated pseudo element and span</title> 

    <style type="text/css"> 
     <!-- 
     p:before { 
      content:"Read this -"; 
      color:red; 
      font-family:"Tahoma" ,Times New Roman; 
      font-size:100%;} 

      .span { 
        font-size:40px; 
       color:blue; 
       } 

     --> 
    </style> 

    </head> 
    <body> 

    <p><span style="color:blue; font-size:30px" >F</span>irst character of this paragraph 
     will be normal and will have font size 40px;</p> 

    </body> 
</html>

Dzięki za wskazówkę-i got my Wyjście sposób sobie wyobrazić, i chcę go

Źródło

2012-07-29 18:46:41 swati16

Jak zastosować CSS do pierwszej litery po: przed treścią?

Odpowiedz

Powiązane problemy