1

グラフィックを使用し、角が丸いボタンがあります。

ボタンをCSSで再利用可能にし、丸い角を維持しながら任意の長さのテキストに対応できるようにするために、メインボタンの後に端の丸い角を追加するために使用したいと思い:afterます（したがって、最初の画像/テキストが大きくなり、丸みを帯びた角は常に端にタックがあります。）

コンテンツ（たとえば、「テスト」という単語やいくつかの背景色）を追加すると機能するよう:afterになりましたが、スタイリングにコンテンツがない場合は機能しません。背景画像が必要なだけです。

ボタン付きのJSFiddle。コードは表示:afterされますが、何らかの理由で表示されません。

#wizard-nav .paging:after
{ 
background-image:url("http://i.imgur.com/GDJgl.png");
height:22px;
width:7px;
}
4

2 に答える 2

4

::beforeおよび::after疑似セレクターを使用する場合は、値をに設定する必要がありますcontent。

疑似要素もインライン要素であるため、高さまたは幅を定義する場合は、それをblock要素として表示する必要があります。

例えば：

#wizard-nav .paging::after {
    content: "";
    display: block; 
    background-image:url("http://i.imgur.com/GDJgl.png");
    height:22px;
    width:7px;
}

実例：http ：//tinkerbin.com/GSO0HpD2

于 2013-01-07T14:21:53.663 に答える
-1

背景画像の代わりになります。たとえば、http：//www.colorzilla.com/gradient-editor/を使用して生成し、border-radiusを好きなだけ適用して境界線を付けることができます。これにより、背景を回避するよりもすばやく同じ効果が得られます。 -このような画像。例えば：

border:red 1px solid;
border-radius:10px;

ちなみに、背景画像が原因で表示されませんでした。あなたの"を削除します 。http：//jsfiddle.net/WZywh/ここに例があります

于 2013-01-07T14:21:23.663 に答える