Css :After Not Adding Content to Certain Elements

CSS :after not adding content to certain elements

img and input are both replaced elements.

A replaced element is any element whose appearance and dimensions are
defined by an external resource. Examples include images (<img> tags),
plugins (<object> tags), and form elements (<button>, <textarea>,
<input>, and <select> tags). All other elements types can be referred
to as non-replaced elements.

:before and :after only work with non-replaced elements.

From the spec:

Note. This specification does not fully define the interaction of
:before and :after with replaced elements (such as IMG in HTML). This
will be defined in more detail in a future specification.

With span:before, span:after, the DOM looks like this:

<span><before></before>Content of span<after></after></span>

Evidently, that won't work with <img src="" />.

Div with CSS content, after pseudo element is not visible

The content property replaces all content within the element. By adding content to a non-pseudo selector, that content will replace the ::before and ::after pseudo selector.

So try doing this using the content property within the ::before and ::after pseudo selectors only.

.demo:before {     content: url('http://placehold.it/350x150')}
.demo:after {    content: 'some text';    display: block;}

<div class="demo"></div>

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.}

Using the :after CSS pseudo-element without inserting content

It is possible to use an :after pseudo-element with the content property set to the empty string "", but not without setting it all (so that it has its initial value none, which means that the pseudo-element is not generated at all).

The reason why you do not see any effect is that your settings effectively cancel each other out. You set a negative left margin, shifting the element leftwards, but you set an equal amount of padding. The pseudo-element itself is empty and thus invisible, so all that matters is the space that it occupies.

This can be illustrated by drawing an outline. I’m using the value 10px instead of 1px for clarity:

.nav-primary li.level0 a:after {    content: "";    padding-right: 10px;    margin-left: -10px;    outline: solid red;}

<div class=nav-primary>  <ul>     <li class=level0><a href=foo>bar</a>xxx     <li><a href=foo>bar</a>xxx  </ul></div>

CSS :after content below a select element causes click not to work

The simplest CSS solution would be to add pointer-events: none to the pseudo element. In doing so, you can click through the element because mouse events are removed.

Updated Example

.select:after {
    position:absolute;
    bottom:.15em;
    top:.15em;
    right:.5rem;
    content:'\2193';
    pointer-events: none;
}

^{(Just take browser support for the property into consideration.)}

after pseudo element not appearing in code

It's because the pseudo-element isn't generated if the content value is omitted (since the initial/default value is none).

Specify a content value in order to generate the pseudo-element. A value of '' is sufficient.

.product-show .readMore.less:after {
    content: '';
    background: rgba(255, 255, 255, 0);
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
}

Firefox not displaying :after pseudo-element

Most browsers don't support pseudo-elements on img tags.

From the spec:

Note. This specification does not fully define the interaction of
:before and :after with replaced elements (such as IMG in HTML). This
will be defined in more detail in a future specification.

See this answer for an explanation as to why.

CSS :before and :after not working?

If you want :before and :after to work, you need to give them content, otherwise they don't really 'exist'. The easiest thing to do is, in the css, set content: '' for both pseudoelements.

Add :before content to an elements child

It works (i.e. clickable etc.) when you use the :before on the child, i.e. .button-1 > a:before:

.button-1 > a:before {
    content: "© ";
    
}

<ul class="menu">
  <li class="button-1">
    <a href="somewhere">Link</a>
  </li>
</ul>

Why is the pseudo content :after not shown after but in the corresponding div?

The :after content comes within the scrollable area because even though the element is named :after, it is in actual terms a child of the div.box and hence will be positioned within the .box element (that is within the scrollable area).

From MDN: The CSS ::after pseudo-element matches a virtual last child of the selected element.

(emphasis mine)

So the code in question in essence becomes the same as the following snippet.

div.box {    background-color: #FAA;    width: 10em;    overflow: scroll;}div.box .after {    display: block;    background-color: #AFA;    width: 5em;    overflow: auto;}

<div class="box">x  <div class="after">☑</div></div>

Css :After Not Adding Content to Certain Elements