0

私はウェブページを作りました。スパンと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 に答える