0

我制作了一个网页。它有许多包含在 span 和 h3 标签中的单词。现在我正在尝试使用 CSS 类在同一行的文本末尾放置一些符号。我可以使用 background-image 属性对下面的类进行此操作：

    .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;               
    }

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

我不想对 HTML 进行任何更改。尽管赞赏任何解决方案。但是 CSS 唯一的技巧会很棒。

4

1 回答 1

0

假设您不需要完整的跨浏览器支持，并且只使用那些实现 CSS3 生成内容的浏览器并且您希望生成的内容立即出现在包含在 . 中的文本之后span，您可以使用::after伪元素：

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

使用 CSS：

.newtohtml5::after {
    content: ' (generated content).'
}

JS 小提琴演示。

值得注意的是，这个生成的内容是在 的内容之后span，但仍然在 内部，并且是span自身的一部分。

您还可以使用元素的属性来包含在生成的内容中，例如，使用以下 CSS 您可以包含class属性中包含的字符串：

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

JS 小提琴演示。

您还可以将图像插入到content属性中：

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

JS 小提琴演示。

于 2012-11-10T21:01:13.827 回答