CODEWITHSUNDEEP
htmlcsslist
TitanTheYaphet
TitanTheYaphet

Reputation: 113

Display different item name using CSS

I have no control over the html cuz its hosted on the other server. If I want to use css to modify some of the list item, how should I do it?

For instance

the server side 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>

And i want to use css to display the last two items as "Cappuccino" and "Americano".

Thanks.

Upvotes: 1

Views: 142

Answers (3)

nice ass
nice ass

Reputation: 16719

Actually it's possible by rendering it using the :after pseudo class. But it's really really ugly. Only do this if you don't have any other alternative:

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

Upvotes: 3

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 175028

You cannot change the content of HTML tags via CSS.

You can hope doing so via JavaScript, and even then, you'll need to select the matching elements from the DOM, and replacing their innerHTML property.

Impossible with CSS though.

Upvotes: 2

Guy P
Guy P

Reputation: 1423

The only hack I can think of is to use the property:

{display:none}

for each tag manuely.

Upvotes: 1

Related Questions