3

Why this CSS ...

.sticky-info span:after {content: 'test';}

... results in ... 

<div class="sticky-info"><span>Price <strong>&euro;120</strong>::after</span>

Is there a way to get the content:'test' behind every </span> inside <div class="sticky-info"> There are several spans inside <div class="sticky-info">

MDC
  • 237
  • 1
  • 5
  • 14
  • so u want to replace the ::after with test???? – m0bi5 Feb 16 '15 at 11:05
  • 1
    No, that's not possible using CSS generated content, unless you move the `::after` pseudo-element to the parent `
    `.
     – David Thomas Feb 16 '15 at 11:07
  • 4
    `::before` and `::after` means **before/after the CONTENT** of the element. – Paulie_D Feb 16 '15 at 11:07
  • 1
    `::before` and `::after` is shadow DOM of the element it is applied to. You can’t add them at the same level. You’ll have to come up with something else my friend. – Tim S. Feb 16 '15 at 11:07
  • 3
    What do you mean by "behind the span"? – Paulie_D Feb 16 '15 at 11:08
  • I want to put the content behind every inside .sticky-info Something like this
    Price €120 testPrice €120 testPrice €120 test
     – MDC Feb 16 '15 at 11:13
  • possibly related to http://stackoverflow.com/questions/28473976/why-is-the-pseudo-content-after-not-shown-after-but-in-the-corresponding-div/28474453#28474453 – Harry Feb 16 '15 at 11:17
  • You need to do `::after` on the `.sticky-info`. __AFTER__ the content of the element. You can't modify things _outside_ of the selected element. – Jon Surrell Feb 16 '15 at 11:19

3 Answers3

5

You can do it like this:

<div class="sticky-info">
    <span>Price <strong>&euro;120</strong></span>
</div>

CSS:

.sticky-info:after {content: 'test';}
Rudi
  • 2,987
  • 1
  • 12
  • 18
  • Not sure why this is being downvoted. It will add content behind the span. – Rudi Feb 16 '15 at 11:41
  • 1
    I imagine it was downvoted because what the OP wants is a solution that adds content after EACH span tag. With your solution it will only add content to the end of the div tag. To achieve what the OP really wants he would have to add a
    tag container around every (I upvoted you though because you're not wrong).
     – Caleb Thornton Jan 31 '18 at 14:15
  • Thanks, seems OP added that requirement after I posted the answer – Rudi Jan 31 '18 at 14:26
1

::before and ::after means before/after the CONTENT of the element so it's not possible in this way. Thx @Paulie_D and @Tim S.

MDC
  • 237
  • 1
  • 5
  • 14
  • Can you please expand this answer a little more and explain what you did end up doing to solve it? – Benjamin Gruenbaum Feb 16 '15 at 11:33
  • 2
    Sure it is possible, see the other answers. – Rudi Feb 16 '15 at 11:38
  • @Benjamin Gruenbaum: basically I wanted a break after every inside a certain
    , on small viewport. On a large viewport there was no need for a break. Instead of trying to add a break on a small viewport I worked the other way around an hided the breaks on a large screen.
     – MDC Feb 16 '15 at 12:45
0

http://fiddle.jshell.net/9g8qzt3f/

If you use span::after the after will be added to the span, behind its content. To get it behind the span, use 

 .sticky-info:after {content: 'test';}
Rence
  • 2,900
  • 2
  • 23
  • 40
  • That's the problem, I have several spans inside .sticky info – MDC Feb 16 '15 at 11:15
  • Basicly I want to put a break after every span inside .sticky-info 'code'.sticky-info span:after { content: ''; display: block; } – MDC Feb 16 '15 at 11:19
  • @MDC if you want to put a break.. use padding or margin. – Mr_Green Feb 16 '15 at 11:20
  • @MDC you should mention things like that in your question, else noone will know about it. My method only works if you have one span, since your question only mentioned one. If you want to use it for multiple, your best call would be to use jquery for that. – Rence Feb 16 '15 at 11:41