Question

我正在用css pseudoelements做一些实验。我知道他们的一个优点是能够在页面中插入一些视觉内容而不影响其语义。我现在要做的很简单：在页面的每篇文章的末尾插入一个特殊字符（“常春藤叶子”）。所以我有一篇空文章，有一个预设的最小高度，以及：在伪元素之前的特殊字符：

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/

为了我的实验，如何在不使用任何不必要的标记的情况下强制常春藤叶子出现在底部？

谢谢！

Answer 1

您可以使用CSS定位在[{1}}上使用bottom position: relative;并使用article定位:after来定位position: absolute;。 {1}}和left属性...

如果您想将树叶置于右侧，或者您也可以使用bottom，则可以使用right代替left，但请确保使用top 1}}对于position: relative;，你的叶子会在野外飞出......

Demo

article

Answer 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/

定位：after伪元素

2 个答案: