0

CSS で :before を使用して、Web サイトの特定のリンクに画像を追加します

a.ext:before {
    content:            url(./_img/ext.png);
}

残念ながら、スペースがあまりない場合、画像とテキストが分離されてしまうことがあります。

改行あり 対。 改行なし

画像がリンクの最初の単語にバインドされていれば、それは素晴らしいことです (HTML で使用 します)。CSSで同様のことが可能ですか?

編集： JSFiddle のスクリーンショット

4

2 に答える 2

0

これを試して：

a.ext {
    padding-left: 15px;
    position: relative;
    white-space: nowrap; /* use this if you don't want the text to wrap */
}
a.ext:before {
    content: " ";
    background: url("https://www.azdes.gov/uploadedImages/icon_external_link.png") center center no-repeat transparent;
    display: block;
    width: 15px;
    height: 1.2em;
    left: 0;
    top: 0;
    position: absolute;
}

スクリーンショット

Chrome 24 と Firefox 18.0.2 で撮影したスクリーンショット。IE 7、8、9 でさらに必要ですか? :P

フィドル: http://jsfiddle.net/praveenscience/TXPJE/1/

于 2013-02-14T07:18:11.857 に答える
0

私があなたの質問を理解していれば、要素がそれらを保持するのに十分な幅がない場合、画像がテキストの下に折り返されないようにしようとしています。

オーバーフローと white-space:nowrap を組み合わせると、探している結果が得られる場合があります。

于 2013-02-14T08:32:57.310 に答える