CODEWITHSUNDEEP
htmlcssuser-generated-content
Luca Detomi
Luca Detomi

Reputation: 5716

Using "css generated content" without adding wrapping elements and redundant markup

I would like to add Currency symbol using "css generated content" after each price present in an html table.

Currently I'm indicating table-cell that contain prices in the following way

<table>
  <tr>
    <td>Test</td>
    <td class='prices'>123</td>
  </tr>
</table>

In order to reach my target I wrap each .prices content with a span, writing the following css rule:

TD *:after
{
  content:' €';
}

It runs correctly but I would like to avoid wrapping with span.

Obviously applying "generated content" directly to TD could be the solution only accepting that currency is written before value, but with my actual solution currency is written after.

Upvotes: 0

Views: 377

Answers (2)

Amit
Amit

Reputation: 1919

try this Demo

<table>
  <tr>
    <td>Test</td>
    <td class='prices'>123</td>
  </tr>
</table>

td{
    width:100px;
    border:1px solid blue;
}
td.prices:after
{
  content:' €';
}

Upvotes: 0

Leon
Leon

Reputation: 2149

Do this:

.prices:after {
    content:' €';
}

or to put the Euro symbol before the content:

.prices:before {
    content:'€ ';
}

Upvotes: 1

Related Questions