Anzeigen eines Schattens, der dem Inlinebox um Textinhalt eng folgt

Question

Ich versuche, einen Effekt zu erzielen, bei dem ich einen Schatten habe, der dem Textinhalt genau folgt.

Ich habe meine Fortschritte hier dokumentiert: https://codepen.io/wolfr/pen/QEGOdY?editors=1100

text-shadow nicht meine Bedürfnisse anzupassen. Es produziert einen minderwertigen Schatten (Test: https://codepen.io/wolfr/pen/KMNyXj?editors=1100)

Das Problem mit meinem derzeitigen Ansatz ist, dass es ziemlich schlecht für Leute ist, die Bildschirmleser verwenden.

Ich habe verschiedene Methoden ausprobiert, um HTML-Inhalte vor dem Lesen durch sceen-Leser in einem anderen Stift here auszublenden. Dazu gehören Medienabfragen und das Attribut speak: none. Keine von ihnen funktioniert. Ich kann die Box nicht außerhalb des Bildschirms positionieren (die klassische Methode), da ich eigentlich ihr Layout brauche. Ich habe auch versucht, Inhalte in einem :before attribute zu verstecken, aber das funktioniert auch nicht.

Answer 1

Sie wollen einen Schatten machen, der folgt, um den Text zu schließen? Wenn dies der Fall ist, können Sie mehrere Textschatten verwenden, um einen ausgefeilteren Schatten zu erstellen.

p { 
 
    color: #d53400; 
 
    font-size: 32pt; 
 
    font-weight: 500; 
 
    text-shadow: 2px 0 8px #555, -2px 0 0 #555, 0 2px 0 #555, 0 -2px 0 #555, 1px 1px #555, -1px -1px 0 #555, 1px -1px 4px #555, -1px 1px 0 #555; 
 
    text-align: center; 
 
}

<p>Text shadow<br />This is another line</p>