2

我正在用 css 伪元素做一些实验。我知道它们的优点之一是能够在页面中插入一些视觉内容而不影响其语义。我现在要做的很简单：在页面中每篇文章的末尾插入一个特殊字符（“常春藤叶”）。所以我有一篇空文章，有一个预设的最小高度，以及 :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 定位bottom通过使用position: relative;onarticle标签和定位:after伪使用position: absolute;与left和bottom属性一起定位叶子...

如果你想把叶子放在右边，你可以使用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 回答