Pseudo-Element After Not Showing

Pseudo-element after not showing?

You don't seem to be using a pseudo-element at the moment. Try this setting .help-tip to .help-tip::after and giving is content: "" and display: inline-block:

.help-tip::after {
    content: "";
    display: inline-block;
    cursor: pointer;
    width: 10px;
    height: 10px;
    background-repeat: no-repeat;
    background-image: url("/assets/small-help-icon.gif");
}

:after pseudo element is not showing up

It's worth noting that the pseudo element is inline by default - you therefore can't add margins or change the dimensions of it. If you were to change the display to block you will notice that it shows up as you would expect (example).

In your case you need to absolutely position it relative to the parent element.

Example Here

.dropbox {
    border:2px solid #ff0000;
    height:200px;
    width:50%;
    margin:auto;
    position:relative;
}
.dropbox:after {
    content:'';
    position:absolute;
    width:10px;
    height:10px;
    background:#ff0000;
    top:100%;
    left:50%;
    margin-left:5px;
}

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

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>

Why are ::before and ::after pseudo-elements detected but not shown in Chrome?

if use position relative, chrome Taking auto width for before .if use position absolute, logo is displayed correctly.

hr.linha:before {
    position: absolute;
}

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.

After pseudo-element not showing box-shadow

The problem is the ::after pseudo element doesn't actually have any width or height. You can set position:relative on the container, and set position:absolute + left:0, right:0, top:0, bottom:0 tricks to make it the same size as the container.

p.tile {  text-align: center;  padding: 5rem;  background: #58588E;  color: white;  margin: 2rem;  box-sizing: border-box;  /* new */  position: relative;}p.tile::after {  content: "";  box-shadow: 3px 5px 20px -1px rgba(0, 0, 0, 0.8);  opacity: 0;  transition: opacity 0.3s ease-in-out;  /* new */  position: absolute;  left: 0;  right: 0;  top: 0;  bottom: 0;}p.tile:hover::after {  opacity: 1;}

<a href="#" class="tile-link">  <p class="tile">My Progress</p></a>

---

Related Topics