csscss-paged-mediaantenna-house

CSS: is there a way to insert the content of an attribute as text in my output?


Normally, CSS works by matching element names in the HTML:p.heading1 {} affects all elements of type p with class heading1.

Is there a way to display an object/text that only exists as an attribute?

For example, this is my HTML:

<body var="text I want to insert">
    <div class="titlepage"> 
        <p class="titlepagetext">this should also be displayed</p>

The title page has a number of <p> children. In addition to them, I want to display the content of body/var on the title page.


Solution

  • You can probably consider CSS variables. The custom property will get inherited by all the elements inside the body and you can use pseudo element to display it where you want:

    .titlepage:before {
      content:var(--var);
    }
    <body style="--var:'text I want to insert'">
      <div class="titlepage">
        <p class="titlepagetext">this should also be displayed</p>
      </div>
    </body>