How to use CSS :before and :after pseudo-elements with inline CSS?

Spread the love

Sometimes, we want to use CSS :before and :after pseudo-elements with inline CSS.

In this article, we’ll look at how to use CSS :before and :after pseudo-elements with inline CSS.

How to use CSS :before and :after pseudo-elements with inline CSS?

To use CSS :before and :after pseudo-elements with inline CSS, we can add a style element.

For instance, we write

<style>
  td {
    text-align: justify;
  }

  td:after {
    content: attr(data-content);
    display: inline-block;
    width: 100%;
  }
</style>

<table>
  <tr>
    <td data-content="post"></td>
  </tr>
</table>

to add a style element with the styles we want.

Then the styles will be applied to the table next to it.

Conclusion

To use CSS :before and :after pseudo-elements with inline CSS, we can add a style element.

Leave a Reply

Your email address will not be published.