Html 将h3或span中包含的单词后的符号与css放在同一行

我制作了一个网页。它有许多包含在span和h3标记中的单词。现在，我尝试使用CSS类将一些符号放在文本末尾的同一行上。我可以使用“背景图像”属性对类执行以下操作：

    .newtohtml5{
        width:fit-content;         
        background-image:url(http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png);
        background-repeat:no-repeat;
        background-size:2%;
        background-position-x:right;               
    }

.newtohtml5::after {
    content: url(http://lorempixel.com/25/25);
    margin-left: 1em;
}​

然而，这个类的问题是HTML5符号出现在行的末尾，在文本和符号本身之间留下了巨大的空间。我希望符号正好出现在同一行跨度中的文本之后，而不是在文本和符号之间有巨大空间的行尾

---

我不想对HTML做任何更改。尽管任何解决方案都值得赞赏。但是CSS-only技巧会很好。

假设您不需要完全的跨浏览器支持，并且只使用实现CSS3生成内容的浏览器是可以的，并且您希望生成的内容立即显示在

span

中包含的文本之后，您可以使用

：：after

伪元素：

<span class="newtohtml5">text here</span> <br/>

值得注意的是，此生成的内容位于

span

的内容之后，但仍然位于

span

本身之内，并且是

span

本身的一部分

您还可以使用元素的属性来包含在生成的内容中，例如，通过以下CSS，您可以包含

类

属性中包含的字符串：

.newtohtml5::after {
    content: ' (.' attr(class) ').';
}​

您还可以将图像插入

内容

属性：

    .newtohtml5{
        width:fit-content;         
        background-image:url(http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png);
        background-repeat:no-repeat;
        background-size:2%;
        background-position-x:right;               
    }

.newtohtml5::after {
    content: url(http://lorempixel.com/25/25);
    margin-left: 1em;
}​

---

.

不应显示样式：内联；你的意思是显示：内联；不，这是为了控制换行；且btw span默认为内联显示；标题并不能说明一切。您没有包含任何标记，也没有说明为什么要使用人工构造和不受广泛支持的构造，而不是只设置与图像宽度匹配的正确填充。（问题还在于为什么图像不是内容的一部分。）@JukkaK.Korpela很抱歉没有经验，但在这样的场景中，我最理想的应该使用哪种结构。考虑到我知道文本只会跨越直线，在直线的末尾一定会有一些空间来适应这个符号。那么我应该如何将符号定位在文本的正后方？标记可以是简单的span:

text here

后跟换行符，如果要添加多个符号，对应于元素上指定的每个类，该怎么办