Was ist der effizienteste Weg, ein anderes Zeichen anstelle eines Leerzeichens auf einer Webseite zu verwenden?

Question

Entschuldigung für den vagen Titel.

Die Frage: Gibt es eine Möglichkeit mit CSS (JavaScript zu vermeiden) Leerzeichen durch ein anderes Zeichen ohne die zusätzlichen Tags zu ersetzen? ex: <h1>coming soon</h1>

Hier ist ein Beispiel dafür, was Ich mag würde verbessern:

<style> 
    @import 'https://fonts.googleapis.com/css?family=Roboto+Mono'; 
    @import 'https://justinoboyle.github.io/font/stylesheet.css'; 
    * { 
     font-family: 'Roboto Mono', monospace; 
    } 
    body { 
     background-color: #01000f; 
    } 
    h1 { 
     color: #1e88e5; 
     font-size: 5vw; 
    } 
    h1 > endword:before { 
     content: "·"; 
     color: #444444; 
    } 
    h1 > endword:after { 
     content: "⏎"; 
     margin-left: 1vw; 
     color: #444444; 
     font-family: "carriagereturn"; 
    } 
</style> 

<h1>coming<endword>soon</endword></h1> 

Vielen Dank im Voraus, und wenn es etwas ist, die Klärung bedarf, dann mich in die wissen, lassen Sie es Bemerkungen.

Answer 1

Es gibt keine vollständigen CSS-Lösungen für diese Herausforderung. Ich habe einige ziemlich haschische Optionen vorbereitet, die du ausprobieren könntest.

1. Mit span-Tags können Sie border-right oder border-left verwenden. Sie können die Höhe dieser Elemente nicht anpassen, da sie exakt mit den Dimensionen des Elements übereinstimmen.

2. Verwenden Sie die vor und nach der Pseudo-Elemente

   HTML: <h1>Hello</h1> <h1>world</h1>
   
   CSS: h1::after {content: url(dot.png) }
   
   Das after Pseudoelement wird ein Bild einfügen (oder etwas anderes) nach dem Inhalt der <h1>.

Answer 2

Wenn ich Ihre Frage richtig verstanden habe, würde ich vorschlagen,   in HTML, die Whitespaces erstellt, wenn das was Sie suchen.