Using :Before and :After CSS Selector to Insert HTML

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.

CSS Selector for adding content through :after / :before when HTML element is missing

This won't be possible without the functionality of the :blank pseudo-class, I'm afraid.¹

There are only two possible places you can insert a ::before pseudo-element in your scenario: in the ul, or in a li. Since you want to insert the generated content only when no li elements are present, that leaves you only with ul.

Although ::before and ::after are inserted before and after an element's descendant elements respectively, you can't target them relative to those descendant elements with a sibling combinator, and pseudo-elements currently do not support structural pseudo-classes. Which means, in other words, you won't be able to say "prevent ul::before from generating content in the presence of one or more li elements", nor can you apply the :only-child pseudo-class to ul::before.

In a situation where one can use :empty, it's as simple as

ul:empty::before { content: 'abc'; }

but since you cannot use :empty for the reasons you have given, if you really cannot prevent the whitespace from being generated (e.g. if the content is coming from a WYSIWYG editor or some other transformation that may result in leftover whitespace) you'll have to add a class to any ul elements with no children.

¹ _{A recent revision to selectors-4 proposes subsuming the functionality of :blank into :empty instead, but that likewise is new and requires the cooperation of implementers.}

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>

Use CSS to insert HTML before the content of a selector

You can't create a h3 there but you can format it like it was h3. You have to repeat all formatting rules, though.

#the-poll-options .error-output:before{
    content: 'An error has occured';
    font-weight: bold;
    font-size: 14px;
    color: red;
    ...
}

The style definition within this :before class will apply to the added content.

How to inserted HTML tag from pseudo-element content:

You can't inject HTML elements using the content property of CSS pseudo-elements; you can, however, set them to display: block and (as seems to be required in your question, though not your demonstrated/attempted code) use height and background-color to emulate an <hr />:

article::before {
    content: '';
    display: block;
    margin: 1em 0;
    height: 5px;
    background-color: #f00;
}

article::before {  content: '';  display: block;  margin: 1em 0;  height: 5px;  background-color: #f00;}

<article>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</article><article>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</article>

How to write ::before / ::after inside anchor tag

What you see here is a CSS pseudo-element.

::before pseudo-element can be used to insert some content before the content of an element. eg - the following code will insert This comes before... before every paragraph.

p::before {
    content: "This comes before...";
}

For more information on CSS pseudo-elements, refer to this link.

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>

Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)

You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).attr('data-content','bar');
});

In CSS:

span:after {
    content: attr(data-content) ' any other text you may want';
}

If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:

In HTML:

<span>foo</span>

In jQuery:

$('span').hover(function(){
    $(this).addClass('change').attr('data-content','bar');
});

In CSS:

span.change:after {
    content: attr(data-content) ' any other text you may want';
}

Using :Before and :After CSS Selector to Insert HTML