0

href属性を持つアンカー要素にテキストを挿入する際に問題が発生しました： 

<a href="myfile.pdf"> Contact Us</a>

お問い合わせの後にアイコンが表示され、アンカータグ内のテキストが表示されるようにcssを作成しようとしています。

a[href$=".pdf"]:after { 
width: 16px;
height: 16px;
content: url('/_assets/img/document-type-icons-2.png') no-repeat -84% 0;
}

このようには機能していません。これを実現するためにCSSを作成するにはどうすればよいですか？

動作しましたが、繰り返しなしや-84％0などの背景プロパティのスタイルを設定するにはどうすればよいですか。

繰り返します

4

2 に答える 2

1

疑似要素として画像を設定background-imageするか、プロパティ:after以外のものを削除します。関数でラップされた画像の文字列（または複数の文字列）またはURLのいずれかが含まれている必要があります（その後、画像は実際の要素のように挿入されます）。url(path)contentcontenturl()IMG

background-image生成された疑似要素を表示するには（の代わりにを使用する場合content: url(path)）、contentプロパティには少なくとも空の文字列（）が含まれている必要があることを考慮してください""。

于 2013-03-26T17:50:47.440 に答える
1

コンテンツはテキストのみを受け入れます。スペースのような特別なチャーターには、16進形式を使用する必要があります。フォローして作業したように変更します。ただし、幅を広げるには、スペースhex（\ 00a0）を繰り返します。

a[href$=".pdf"]:after {
background: url('http://cdn1.iconfinder.com/data/icons/fatcow/32x32/file_extension_pdf.png') ;
width: 40px;
height: 40px;
content: "\00a0\00a0\00a0\00a0\00a0"
}
于 2013-03-26T18:03:01.880 に答える