在网页上使用其他字符而不是空格的最有效方法是什么？

Question

道歉的标题道歉。

问题：有没有办法用CSS（避免JavaScript）用其他字符替换空格而没有额外的标记？ e.x：<h1>coming soon</h1>

以下是我想要改进的示例：

<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>

提前感谢您，如果有需要澄清的内容，请在评论中告诉我。

Answer 1

这个挑战没有完全的CSS解决方案。我准备了一些你可以尝试的相当苛刻的选择。

1. 使用span标记，您可以使用border-right或border-left。您无法调整这些高度，因为它们与元素的尺寸完全匹配。

2. 使用前后Pseudo元素

   HTML：     <h1>Hello</h1> <h1>world</h1>    
   
      CSS：      h1::after {content: url(dot.png) }

after伪元素将在<h1>的内容之后插入图像（或其他内容）。

Answer 2

如果我正确地理解了你的问题，我会建议在html中使用 ，如果那就是你正在寻找的内容，它会创建空格。