Div with CSS content, after pseudo element is not visible - css

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/

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>

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.

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.

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>