web-dev-qa-db-ja.com

CSS：before /：after擬似要素で画像の高さを変更できますか？

画像を使用して特定のファイルタイプへのリンクを装飾したいとします。私のリンクを次のように宣言することができます

<a href='foo.pdf' class='pdflink'>A File!</a>

それならCSSのように

.pdflink:after { content: url('/images/pdf.png') }

pdf.pngが私のリンクテキストに適したサイズでない場合を除いて、これはとてもうまくいきます。

ブラウザに:after画像を拡大縮小するように伝えたいのですが、私の人生のために正しい構文を見つけることができません。それとも、これは背景画像のようなものですか？

ETA：私は、a）ソースイメージのサイズを「正しい」サイズ、サーバー側に変更すること、および/またはb）マークアップを変更してIMGタグをインラインで提供することのどちらかに傾いています。私はそれらの両方を避けようとしていましたが、純粋にCSSで何かをしようとするよりも互換性があるように思えます。私の最初の質問に対する答えは「あなたは種類のそれをできる、時にはできる」というようです。

csspseudo-element
211
Coderer

background-size の調整は許可されています。ただし、それでもブロックの幅と高さを指定する必要があります。

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

MDNの完全な互換性表を参照してください 。

315
Ansel Santosa

:after擬似要素はボックスであり、生成された画像が含まれています。画像にスタイルを設定する方法はありませんが、ボックスにスタイルを設定することができます。

以下は単なるアイデアであり、上の ソリューション はより実用的です。

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

欠点：あなたは画像の固有の寸法を知る必要があります、そしてそれは私がATMを取り除くことができないいくつかの空白をあなたに残します。

85
user123444555621

私の他の答えは明らかによく理解されていなかったので、これは2番目の試みです：

質問に答えるには2つの方法があります。

実用的（ただ私に最高の絵を見せてください！）

:after疑似セレクターについては忘れて、以下のようなものにしてください。

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

理論的

問題は次のとおりです。生成されたコンテンツをスタイルできますか。答えは：いいえ、できません。この問題に関しては、 W3Cメーリングリスト で長い議論がありましたが、これまでのところ解決策はありません。

生成されたコンテンツは生成されたボックスにレンダリングされ、そのボックスにスタイルを設定することはできますが、 そのようなコンテンツにはできません 。ブラウザが異なれば動作も大きく異なります

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

Chromeは最初のサイズを変更しますが、2番目のイメージには本来のサイズを使用します

firefoxと最初のものをサポートしていない、そして2番目のために本質的な寸法を使用する

オペラは両方の場合に固有の次元を使う

（ http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html から）

同様に、ブラウザでは、 http://jsfiddle.net/Nwupm/1/ のように、複数の要素が生成された場合、結果が大きく異なります。 CSS3はまだ初期の開発段階にあり、この問題はまだ解決されていないことを忘れないでください。

33
user123444555621

あなたは画像の代わりに背景を使うべきです。

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}
7
Santi Nunez

これはもう一つの（実用的な）解決策です：ちょうどあなたが望むサイズにあなたのイメージをリサイズしてください:)

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

これを機能させるには、pdf.pngが20ピクセル×10ピクセルになる必要があります。 cssの20px/10pxは、ブロックのサイズを指定するためのもので、ブロックの後に来る要素がすべて画像と混同されないようになっています。

元の画像のコピーを元のサイズに保つことを忘れないでください

4
Thomas

diplay: block;は効果がありません

positioninはフロントエンドの基礎に非常に奇妙な働きをするので、注意してください

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}
4
Dmytro Yurchenko
.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    width: 10px; 
    height: 20px;
    padding-left: 10px;// equal to width of image.
    margin-left:5px;// to add some space for better look
    content:"";
}
3
Ravi Soni

BeforeまたはAfter 要素の高さまたは幅は次のように変更できます。

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}
2
Nesha Zoric

現在のflexboxでは、コードを大幅に単純化し、必要に応じて1つのパラメータだけを調整できます。

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 10px;
}

これで、要素の幅を調整するだけで、高さが自動的に調整されます。要素の高さが必要な数になるまで幅を増減します。

2
rhysclay

zoomプロパティを使用できます。このjsfiddleをチェック してください

2
Plamen

私はこのフォントサイズコントロール幅を使いました

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}
1
Andre Jesus Seiji Nishi
content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;
0
uyghurbeg