html - CSS:伪元素

Question

下面的 CSS 代码将“*”放在 span 元素中的列表结尾之后。请参阅代码下方的文本。我需要将星号放在“选项 3”旁边或“文本示例:”行之后，而不是在它下面。

.asterisks:after
{
    color: Red;
    content: " *";
}

文本示例:

1. 测试题

一个。选项一

选项 2

选项 3

*

我在我的元素中为 100 个元素使用“星号”类，它运行良好，但仅在列表时失败。

此外，此列表来自 XML 文档而非 aspx。

有什么建议吗？

Answer 1

您必须使用最后一个子选择器:

html

<ul class="asterisks">
    <li>option 1</li>
    <li>option 2</li>
    <li>option 3</li>
</ul>

CSS

.asterisks li:last-child:after
{
    color: Red;
    content: " *";
}

http://jsfiddle.net/9m7yh1cd/1/