10

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/

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
ICodeGorilla
  • 588
  • 1
  • 5
  • 26

4 Answers4

13

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>
Jamy
  • 901
  • 8
  • 12
  • 1
    Just adding to the explanation, `content` only works on pseudo elements i.e `:before` and `:after`, so using `content` for `.demo` will fail. – Mr. Alien Mar 07 '17 at 09:40
  • 1
    @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. – Jamy Mar 07 '17 at 10:10
  • 1
    @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. – BoltClock Mar 07 '17 at 11:47
  • 1
    @BoltClock 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... @Jamy thanks you too for clarifying. – Mr. Alien Mar 07 '17 at 11:52
4

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.

Albzi
  • 15,431
  • 6
  • 46
  • 63
2

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.

Community
  • 1
  • 1
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
0

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>
Joel Giovinazzo
  • 1
  • 3