html - 使用 CSS 显示不同的元素名称

Question

我无法控制 html，因为它托管在另一台服务器上。如果我想用css修改一些列表项，我应该怎么做？

例如

服务器端 html:

<ol>
<li>Coffee</li>
<li>Milk</li>
<li>Orange Juice</li>
<li>Chocolate Milk</li>
<li>Espresso with hot foamy milk</li>
<li>Espresso diluted with hot water</li>
</ol>

我想使用 CSS 将最后两项显示为“Cappuccino”和“Americano”。

谢谢。

Answer 1

实际上可以通过使用 :after 伪类来渲染它。但它真的很难看。仅当您没有其他选择时才这样做:

ol li:nth-child(5){
    color: #fff;           /* same color as the background to hide it */
    position:relative;
}    
ol li:nth-child(5):after{
    content: "Capuccino";
    display: block;
    color: #000;          /* your text color */
    position:absolute;
    top:0;
    left:0;
}

jsfiddle