CODEWITHSUNDEEP
css
Sarfraz
Sarfraz

Reputation: 382696

Inline Content CSS Property

Is it possible to use CSS's 'content' property using inline CSS something like this:

<p class="myclass" style=".myclass:after:content = 'my content here'">Hello There !!</p>

Upvotes: 2

Views: 11316

Answers (5)

Jeff
Jeff

Reputation: 2235

Let's assume the OP wanted to generate the inline style dynamically. Here is a kludgey php fragment (from a yii view I wrote) that uses the label property of a data model as both the id attribute and the css content:

$content = "<div id='".strtr($model->label,' ','_')."'><style type='text/css'>#"
. strtr($model->label,' ','_').":before {content: '".$model->label."';}</style>" 
. $this->renderPartial( '//team/_tree', array( 'models' => $model->teams ), true )
. "</div>\n" ;

Upvotes: 1

Rasmus Kaj
Rasmus Kaj

Reputation: 4360

You can't use selectors in style attributes, so I would say no.

You can still put the style in the html file, like so:

<style type="text/css">
    .myclass:after { content: 'my content here'; }
</style>
...
<foo class="myclass">Hello There!!</foo>

Upvotes: 2

anddoutoi
anddoutoi

Reputation: 10111

There exists a working draft on Syntax of CSS rules in HTML's "style" attribute.

If it works as in the WD you should be able to do something like:

<p class="myclass" style="{color: #C00; font-weight: bold} :after {content: 'my content here'}">Hello There !!</p>

Upvotes: 0

Chris
Chris

Reputation: 4671

No. Inline styles via the 'style' attribute can only be applied to the context element, without any selectors of any sort.

Upvotes: 7

P&#228;r Wieslander
P&#228;r Wieslander

Reputation: 28934

I think you mean something like this:

<html>
  <head>
    <style>
      .myclass:after {
        content: "my content here";
      }
    </style>
  </head>
  <body>
    <p class="myclass">Hello There</p>
  </body>
</html>

Upvotes: 2

Related Questions