Css Content Property: How to Insert HTML Instead of Text

CSS content property: is it possible to insert HTML instead of Text?

Unfortunately, this is not possible. Per the spec:

Generated content does not alter the document tree. In particular, it is not fed back to the document language processor (e.g., for reparsing).

In other words, for string values this means the value is always treated literally. It is never interpreted as markup, regardless of the document language in use.

As an example, using the given CSS with the following HTML:

<h1 class="header">Title</h1>

... will result in the following output:

<a href="#top">Back</a>Title

CSS Content to add HTML tags

A similar effect can be achieved:

#br:after {
  content: "";
  display: block;
}

http://jsfiddle.net/2j4JD/

Is it possible to set a CSS class' :after pseudo-element content property to the value of a text input on the same page

This is not possible without javascript.

But you can show an attribute:

<div data-text="Show this text"></div>

<style>
div:after { 
    content: attr(data-text);
}
</style>

Adding HTML entities using CSS content

You have to use the escaped unicode :

.breadcrumbs a:before {
  content: '\0000a0';
}

More info on : http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Can I use the pseudo element to insert html element?

Unfortunately, you can't do that with CSS. But it's possible in JavaScript, for instance with jQuery .append(); method.

// Add Baz to .myList$( ".myList" ).append($("<li>Baz</li>"));

<!-- jQuery --><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myList">  <li>Foo</li>  <li>Bar</li></ul>

Adding CSS content property after 'div id=name' simultaneously on a rectangle

It's exactly what you've tried with the pseudo elements that is causing problems. That psuedo element will be there as long as #height and #width are on the DOM.

Two solutions:

Create a special style rule like .ticks or something. Add that class to width and height after calculating the value.

.ticks::after {
  content: "\0022";
}

document.getElementById('width').classList.add("ticks");
document.getElementById('height').classList.add("ticks");

Simply add the " symbol to the end of the string being shown in the frame after calculating.

document.getElementById('width').innerHTML = new Fraction(width).toString() + '"';
document.getElementById('height').innerHTML = new Fraction(height).toString() + '"';

Using :before and :after CSS selector to insert HTML

content doesn't support HTML, only text. You should probably use javascript, jQuery or something like that.

Another problem with your code is " inside a " block. You should mix ' and " (class='headingDetail').

If content did support HTML you could end up in an infinite loop where content is added inside content.

Insert HTML from CSS

Content (for text and not html):

http://www.quirksmode.org/css/content.html

But just to be clear, it is bad practice. Its support throughout browsers is shaky, and it's generally not a good idea. But in cases where you really have to use it, there it is.