Div with CSS content, after pseudo element is not visible

Question

I have a POC that I have to complete and I am only allowed to use CSS to update the styles of a product. I have replaced one of the images of the product with a logo by using the CSS content attribute.

I have to add a simple string with a phone number to be shown after this logo. I have tried to use the :after pseudo-element to do this. This works only if the content of the div is empty (logo is removed).

.demo {
  content: url('http://placehold.it/350x150')
}

.demo:after {
  content: 'test';
  display: inline-block;
}

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

I have tried changing the display to inline-block and hard coding the heightand width for both rules. Essentially everything I could find. Any help would be greatly appreciated.

JSFiddle here: https://jsfiddle.net/qykbjznm/

Kairouan

Possible duplicate of: #6949648 – Bewray

@pzworks: Not even close. – Keewatin

Answer 1

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>

Tercet

Just adding to the explanation, content only works on pseudo elements i.e :before and :after, so using content for .demo will fail. – Syphilology

@Mr.Alien if you look at the JSfiddle provided by OP, content is applied to a non-pseudo selector and is rendering as content would within ::before/::after which is the root cause of the problem he was having. – Tercet

@Mr. Alien: Correction, it's only supported on ::before and ::after. Some browsers do apply content to actual elements, but it's considered non-standard behavior. – Keewatin

@Keewatin My bad, what I meant was that you need to have content for pseudo elements, without them, it won't render. Was kinda FYI. Thanks though... @Tercet thanks you too for clarifying. – Syphilology

Answer 2

You could replace the background from the CSS and put it as an image in the HTML:

.demo::after {
    content: 'test';
    display: inline-block;
}

<div class="demo">
  <img src='http://placehold.it/350x150'/>
</div>

Or even do this:

.demo {
     background: url('http://placehold.it/350x150');
     height:150px;
     width:350px;
}

.demo::after {
    content: 'test';
}

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

There are two different results.

Ichnology

Answer 3

Some browsers apply the content property to actual elements, despite it not being supported in CSS2. css-content-3 is expected to allow this, but until the level 3 spec becomes a standard, which realistically won't happen for another few years (especially considering it hasn't happened in the last 14 years), applying content to actual elements should be considered non-standard behavior.

When the value of the content property is an image, that image is inserted as replaced content. And when this is applied to an actual element, this prevents the element from having ::before and ::after pseudo-elements. This is why your ::after pseudo-element doesn't appear.

As mentioned, all you have to do is apply the image to the element's ::before pseudo-element, not the element itself.

Keewatin

Answer 4

I have messed around with your JSFiddle a bit and I found that the only real way of making the phone number display below the current div is by creating another div:

<div class="demo"></div>
<div class="demo2"></div>
<style>
  .demo {
    content: url('http://placehold.it/350x150');
    height:150px;
    width:350px;
  }

  .demo2:before {
    content: "test";
  }
</style>

Gaudy