TransWikia.com

How to add content and add color to it using css only

Stack Overflow Asked on November 18, 2021

I have below HTML code:

<table>
  <thead>
    <th>H1</th>
    <th>H2</th>
  </thead>
  <tbody>
    <tr attribute-name="false">
      <td>Item</td>
      <td>Val</td>
    </tr>
    <tr attribute-name="false">
      <td>Item</td>
      <td>Val</td>
    </tr>
    <tr attribute-name="true">
      <td>Item</td>
      <td>Val</td>
    </tr>
    <tr attribute-name="true">
      <td>Item</td>
      <td>Val</td>
    </tr>
  </tbody>
</table>

Now I want to select only elements with attrbute-name="true" and modify its Item as Item my-text-in-greencolor. So here I want to add some custom text with green color.

Is there a way to do this using only CSS?

csshtml

5 Answers

CSS can insert text content before or after an element. To specify this, make a rule and add ::before or ::after to the selector. In the declaration, specify the content property with the text content as its value.

HTML

A text where I need to <span class="ref">something</span>

CSS

.ref::before { 
     font-weight: bold;
     color: navy;
     content: "Reference "; 
}

Output

A text where I need to Reference something

To set the text from first td after the attribute green you can do.

tr[attribute-name="true"] > td {
     color:green;
}

tr[attribute-name="true"] > td:nth-child(1):after { 
     content: ' my-text-in-greencolor'; 
}

Answered by Ahron M. Galitzky on November 18, 2021

You can do something like this:

[attribute-name="true"] td:first-child {
  background-color: yellow;
}

[attribute-name="true"] td:first-child::after {
  content: ' is true';
}
<table>
  <thead>
    <th>H1</th>
    <th>H2</th>
  </thead>
  <tbody>
    <tr attribute-name="false">
      <td>Item</td>
      <td>Val</td>
    </tr>
    <tr attribute-name="false">
      <td>Item</td>
      <td>Val</td>
    </tr>
    <tr attribute-name="true">
      <td>Item</td>
      <td>Val</td>
    </tr>
    <tr attribute-name="true">
      <td>Item</td>
      <td>Val</td>
    </tr>
  </tbody>
</table>

Answered by Manjuboyz on November 18, 2021

    [attribute-name="true"] {
      background-color: green;
    }

    [attribute-name="true"] td:nth-child(1):after {
      content: ' my-text-in-greencolor';
    }
<table>
  <thead>
    <th>H1</th>
    <th>H2</th>
  </thead>
  <tbody>
    <tr attribute-name="false">
      <td>Item</td>
      <td>Val</td>
    </tr>
    <tr attribute-name="false">
      <td>Item</td>
      <td>Val</td>
    </tr>
    <tr attribute-name="true">
      <td>Item</td>
      <td>Val</td>
    </tr>
    <tr attribute-name="true">
      <td>Item</td>
      <td>Val</td>
    </tr>
  </tbody>
</table>

Here you are:

[attribute-name="true"] {
  background-color: green;
}

[attribute-name="true"] td:nth-child(1):after {
  content: ' my-text-in-greencolor';
}

https://jsfiddle.net/ramseyfeng/azmgy2h7/

Answered by huan feng on November 18, 2021

You can use the 'attribute selector' --

tr[atribute-name="true"] { 
  color: green;
}

More information: https://www.w3schools.com/css/css_attribute_selectors.asp

Answered by Eric Wolf on November 18, 2021

You can just call it in CSS and change color to green if its true.

[attribute-name="true"] {
  color: green;
}

[attribute-name="true"] td:nth-child(1)::after {
  content: " is true";
}
<table>
  <thead>
    <th>H1</th>
    <th>H2</th>
  </thead>
  <tbody>
    <tr attribute-name="false">
      <td>Item</td>
      <td>Val</td>
    </tr>
    <tr attribute-name="false">
      <td>Item</td>
      <td>Val</td>
    </tr>
    <tr attribute-name="true">
      <td>Item</td>
      <td>Val</td>
    </tr>
    <tr attribute-name="true">
      <td>Item</td>
      <td>Val</td>
    </tr>
  </tbody>
</table>

Answered by Gosi on November 18, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Answers

Recent Questions

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP