CODEWITHSUNDEEP
csshtml
cheersmate
cheersmate

Reputation: 2666

Insert nested element

Is there a way to wrap the contents of an element with another element using CSS?

I am looking for a mechanism similar to :before but which will take this HTML

<div class="wrap-content">
    content
</div>

and turn it into this:

<div class="wrap-content">
    <p class="wrapper">
        content
    </p>
</div>

Why I need this: I have divs with float: right but the content should be aligned left. I can achieve this by inserting a <p style="text-align:left"></p> around the contents.

However I'm writing content in markdown for a browser presentation framework where I have a short syntax for inserting the outer div, adding the p manually would mean a lot of copy and paste (and clutter). If there is a different (smarter) way to do this I would of course also be happy.

Upvotes: 0

Views: 86

Answers (1)

Okba
Okba

Reputation: 783

I don't think it is possible using css only, you probably neet some javascript.

Otherwise, if you are able to update the outer div, you can use the :before and add an attribute to the outer div to use its value as the content of :before, something like this:

<div class="wrap-content" data-content="content"></div>

CSS:

.wrap-content:before{
  content: attr(data-content);
  display: block;
  text-align: left;
}

Upvotes: 2

Related Questions