定位 :after 伪元素答案

【问题标题】：Positioning the :after pseudoelement定位 :after 伪元素
【发布时间】：2013-12-30 16:10:44
【问题描述】：

我正在用 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/

为了我的实验，我怎样才能强制常春藤叶出现在底部，而不使用任何不必要的标记？

谢谢！

【问题讨论】：

标签： html css css-position pseudo-element css-content

【解决方案1】：

您可以使用 CSS 定位将叶子定位在 bottom 处，方法是在 article 标记上使用 position: relative; 并使用 position: absolute; 以及 left 和 bottom 属性定位 :after 伪...

如果你想把叶子放在右边，你可以使用right而不是left，或者说，你也可以使用top，但请确保你使用position: relative;作为article否则你的叶子会飞到野外...

Demo

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;
}

【讨论】：

这正是我所缺少的。我已经尝试对伪元素使用绝对定位，但没有对文章使用相对定位。谢了！
@FrancescoS。欢迎您，仍然对定位感到困惑，而不是您可以阅读this

【解决方案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/

【讨论】：