2013-10-29 5 views
5

Gibt es eine Möglichkeit, das erste Zeichen eines Elements hervorzuheben, auf das das Pseudoelement ::first-letter angewendet wurde?CSS-Hervorhebung des ersten Buchstabens

Ich versuche, dem Benutzer Feedback in Bezug auf eine Textauswahl zu geben. Der ausgewählte Text wird für ein Twitter-Plug-in verwendet und funktioniert problemlos (d. H. Das Anfangsbuchstabe ist enthalten); es scheint jedoch nicht so, als ob der Text tatsächlich hervorgehoben werden könnte.

Hier ist ein Link zu einem CodePen example und hier ist ein Screenshot zu zeigen, zu helfen, was ich spreche:

enter image description here

ich die größeren, roten „S“ zu markieren versucht, aber konnte nicht.

Jede Hilfe wird sehr geschätzt und ich entschuldige mich im Voraus, wenn dies ein Duplikat ist. Vielen Dank!

+1

@doublewire seine Arbeits in Ihrem Link. – Rex

+1

Es funktioniert definitiv für mich auf Firefox. – BoltClock

+1

Es scheint ein Problem mit WebKit zu sein, da sowohl Chrome als auch Safari fehlschlagen, wie der Post beschreibt. –

Antwort

2

Dies ist ein bekannter Fehler und ein Duplikat dieser Frage CSS First Letter Highlighting

von dort genommen: Das ist ein Fehler in Chrome/ium/WebKit: https://code.google.com/p/chromium/issues/detail?id=17528

+0

Ihre ursprüngliche Aktion zum Posten eines Kommentars war richtig - ich bin mir nicht sicher, warum Sie es für eine gute Idee hielten, den Kommentar zu löschen und stattdessen eine Antwort zu posten. Das Beantworten einer doppelten Frage durch Kopieren einer Antwort aus dem Duplikat tut nichts anderes, als die Duplizierung zu verschlimmern. – BoltClock

+0

Das ist ein faires Argument, und ich stimme dem zu, obwohl ich befürchtete, dass es in dem "more comments" -Toggle verloren gehen würde. Ich würde verstehen, wenn es zu einem Kommentar bewegt/bearbeitet wird. –

-1

Sie können etwas tun:

p:first-letter { 
    float: left; 
    font-size: 3em; 
    color: #333; 
} 

<p>This is your paragraph.</p> 

ich darüber vor ein paar Jahren schrieb in einem Artikel mit dem Titel Styling CSS First-Letter. Es gibt mehr spezielle Fallbeispiele dort.

+1

Wie geht das Problem in der Frage an? Hast du in dem Testfall nachgesehen, der verlinkt war? – BoltClock

+1

Danke, aber Floating das Pseudo-Element scheint nicht mit dem Textauswahlproblem zu helfen. – doubleswirve