2

CSS疑似要素を使っていくつかの実験を行っています。それらの利点の 1 つは、ページのセマンティクスに影響を与えずにページに視覚的なものを挿入できることだと理解しています。私が今やろうとしていることは非常に単純です: ページの各記事の最後に特殊文字 (「アイビー リーフ」) を挿入します。したがって、事前に設定された最小の高さと、:before 疑似要素に特殊文字を含む空の記事があります。

article {
    min-height: 100px;
    border: 1px solid black;
    border-radius: 5px;
    margin-top: 10px;
    padding: 20px 2px 20px 2px;
}
article:after {
    display: block;
    content:"\2766";
    font-size: 150%;
}

なので、記事欄の最後に特殊文字が表示されると思っていたのですが、そうではありません。このフィドルでわかるように、記事コンテンツの通常の流れに従います: http://jsfiddle.net/fscali/2XFKL/1/

私の実験のために、不要なマークアップを使用せずにツタの葉を強制的に下部に表示するにはどうすればよいですか?

ありがとう！

4

2 に答える 2

3

CSS ポジショニングを使用して、 onタグをbottom使用してリーフを配置し、プロパティと一緒に使用して疑似配置を行うことができます...position: relative;article:afterposition: absolute;leftbottom

葉を右に配置したい場合はright代わりに使用できます。または、同様に使用することもできますが、葉が野生に飛び出す場合は必ず使用してください...lefttopposition: relative;article

デモ

article {
    min-height: 100px;
    border: 1px solid black;
    border-radius: 5px;
    margin-top: 10px;
    padding: 20px 2px 20px 2px; /* You can write this as padding: 20px 2px; */
    position: relative;
}
article:after {
    display: block; /* You won't need this as we are using position: absolute; */
    content:"\2766";
    font-size: 150%;
    position: absolute;
    bottom: 5px; /* Left some breathing space, you can use 0 too */
    left: 5px;
}
于 2013-12-30T16:13:10.917 に答える
2 
article {
    min-height: 100px;
    border: 1px solid black;
    border-radius: 5px;
    margin-top: 10px;
    padding: 20px 2px 20px 2px;
    position: relative; /* Added */
}

article:after {
    display: block;
    content:"\2766";
    font-size: 150%;
    position: absolute; /* Added */
    bottom: 0; /* Change to your needs */
}

http://jsfiddle.net/2XFKL/4/

于 2013-12-30T16:13:20.627 に答える