Insert HTML from CSS

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.

Injecting HTML via CSS

HTML stores the data, and is the Model

CSS stores the styles, and is the View

JS stores the interactions, and is the Controller

If you're trying to add data to the page, it should be done via HTML. If you're simply trying to add an image as a style, use the background-image property. You don't need to inject an <img> element in the page to do that.

Don't ever do this, ever

As far as being able to inject HTML into the page via CSS, it's not directly possible, however it's possible to add JavaScript into the page using CSS, which can then add HTML to the page.

I can't emphasize enough how wrong that approach would be.

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

Insert Html element completely right into a div with CSS (Vue)

You could try the following CSS:

.wrapper > .filter-container {
  display:flex;
  background-color:green;
  justify-content:space-between;
}

For more information on how to work with flex elements have a look here

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.

Is it possible to insert an HTML tag from pseudo-element content using CSS?

As said by @rounin you can't insert html in the generated content.

But hr is just an element with its custom CSS styling.

You can recreate the styling for your generated content

article::before {  content: "";  border: 1px inset;  box-sizing: border-box;  color: gray;  display: block;  height: 2px;  margin: 0.5em auto;}

<article>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque nihil odit impedit ipsam et ducimus.</article><article>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim deleniti!</article>

Add HTML tag inside CSS Content property

This is impossible. You cannot generate markup from CSS.

It should also be unnecessary - stick your background image / icon font / whatever in the generated pseudo-element you have already.

---

Related Topics