How to edit HTML with CSS? [closed]


Tags: html,css

Problem :

As I'm having my website edited in one of the web editors, I'm unable to access some of the files to edit the HTML myself. I read lots of topics on how to alter HTML with CSS, but in this case those didn't work.

This is the HTML generated with Chrome's inspector (again, I can't access this HTML in the editor):

<table id="wsite-com-checkout-list">
<thead>
    <tr>
        <th class="wsite-com-checkout-list-item" colspan="2">Items</th>
        <th class="wsite-com-checkout-list-price">Price</th>
        <th class="wsite-com-checkout-list-quantity">Quantity</th>
        <th class="wsite-com-checkout-list-total wsite-align-right">Total</th>
    </tr>
</thead>
</table>

So I'd like to have words Items, Price, Quantity and Total translated to another language, how do I do it?

One another example I need help about:

<a class="wsite-com-continue-shopping" href="/">
                <span class="caret">◀</span>
                Continue Shopping</a>

I'd like to have the word "Continue Shopping" translated to another language here.



Solution :

Short Answer: CSS isn't really designed for that sort of thing, you should probably look into a different solution. It is technically possible though.


You can actually set the content of CSS elements, but only :before and :after elements that are applied to the element. Therefore, if you have an element like

<td id="HelloText">Hello</td>

You can have it "translated" to Spanish with

#HelloText
{
    font-size: 0; // hides existing text
}

#HelloText:after
{
    font-size: 14px;
    content: "Hola";
}

This isn't really ideal though, because this adds more bloat to your CSS and HTML (your page is loading the English and other language text), and this won't really work well for large blocks of text, or formatted text, eg text with <span> tags or <a> tags.

Not to mention that this is really bad for SEO. A search engine crawler normally just looks at a page's HTML (and sometimes Javascript) to index the page, never at what is in the CSS files attached to the page.

You definitely want to talk to the programmers that have access to the HTML to see if you can implement a server-side or Javascript solution for translation.


    CSS Howto..

    How to get CSS height value (rather than calculated height) in jQuery

    BackboneJS + HandlebarsJS - how to add image based on css

    How to load up CSS files using Javascript?

    How to debug a website template which is very slow (client side)?

    How to make the newly appended html code keep the original css style?

    CSS: How to create a button with an arrow placedo on the right

    Generated web font doesn't show dots above Ü

    How to vertically align div containers with CSS?

    Javascript jQuery only shows Image element once in IE. FF works

    How can I create an inline grouped listview in windows 8

    How To Design a Website for the Non-Designer that takes full advantage of JQuery on the client?

    CSS Animation: how to trigger the reverse animation?

    How can I remove “border-top-width” css style?

    CSS - How to avoid element content to be displayed on 2 lines

    how to change to color of pseudo-elements in css through jquery

    How to do this angle background by CSS?

    How to center align vertically the container in bootstrap

    How can I get the box with text to stick to the top of each wrap div?

    show button instead of menu bar when browser resize in css/html [closed]

    How to make DIV constantly display text on click?

    How can I make several divs on the left overlap one div on the right?

    How to see CSS boxes in firefox inspector

    How to find equivalent property in Mozilla of given Webkit CSS property

    How to give same style to first 2 paragraphs differently in css

    How to place a color cover on top of an image in CSS

    Responsive design: How to open links in a modal window for desktop browsers, but not on a mobile device?

    How do I change properties of text that's being imported via php

    How to draw X Sign with SVG+CSS?

    How to select a div with nth-child()?

    How to place two divs next to each other -HTML/CSS