web-dev-qa-db-ja.com

幅と高さは：before擬似要素では機能しないようです

ここ はフィドルです。

<p>foo <a class="infolink" href="#">bar</a> baz</p>

そして

a.infolink::before
{
    content: '?';
    background: blue;
    color: white;
    width: 20ex;
    height: 20ex;
}

「？」が表示されますが、明らかに20exサイズではありません。何故なの？ FirefoxおよびChromeでテスト済み。

csspseudo-element
48
spraff

注：::beforeおよび::after擬似要素 は、実際にはデフォルトでdisplay: inline;に配置されます。

インラインの書式設定コンテキストを維持しながら、幅と高さを有効にするには、表示値をinline-blockに変更します。

a.infolink::before {
    content: '?';
    display: inline-block;
    background: blue;
    color: white;
    width: 20px;
    height: 20px;
}

http://jsfiddle.net/C7rSa/3/

94
Adrift

::beforeおよび::after擬似要素はデフォルトでインラインに配置されるため、widthおよびheightは有効になりません。

display: inline-blockおよび 動作するはずです に設定します。

10
BoltClock

コンテナまたはCSSに画像がある場合に使用しますwhite-space：nowrap; property

body::before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
}
2
Dmytro Yurchenko

display:block;を追加

デモ

p > a.infolink::before {
    display:block;
    content:'?';
    background: blue;
    color: white;
    width: 20ex;
    height: 20ex;
    border:1px solid #000;
}
1
NoobEditor

私はそれを動作させることができますが、幅のパーセンテージを使用しません。ピクセルは正常に動作します

visibility: visible;
content: "stuff";
min-width: 29px;
width: 100%;
float: left;
position: relative;
top: -15px;
left: 0;
1
e11world