Add a space after an element using after

Question

I want to add a blank space after some content  however the content       doesn t seem to work   This is my code   h2 after       content               which doesn t work  however this does   h2 after       content   -       What am I doing wrong

User · Answer

element  after        display  block      content   quot   quot      This worked for me

User · Answer

Explanation  It s worth noting that your code does insert a space  h2  after     content           However  it s immediately removed   From Anonymous inline boxes      White space content that would subsequently be collapsed away   according to the  white-space  property does not generate any   anonymous inline boxes    And from The  white-space  processing model      If a space  U 0020  at the end of a line has  white-space  set to    normal    nowrap   or  pre-line   it is also removed    Solution  So if you don t want the space to be removed  set white-space to pre or pre-wrap    x000D   x000D  h2   x000D    text-decoration  underline  x000D    x000D  h2 space  after   x000D    content       x000D    white-space  pre  x000D    x000D   lt h2 gt I don t have space  lt  h2 gt  x000D   lt h2 class  space  gt I have space  lt  h2 gt  x000D   x000D   x000D    Do not use non-breaking spaces  U 00a0   They are supposed to prevent line breaks between words  They are not supposed to be used as non-collapsible space  that wouldn t be semantic

User · Answer

Turns out it needs to be specified via escaped unicode  This question is related and contains the answer   The solution   h2 after       content    00a0

User · Answer

There can be a problem with  quot  00a0 quot  in pseudo-elements because it takes the text-decoration of its defining element  so that  for example  if the defining element is underlined  then the white space of the pseudo-element is also underlined  The easiest way to deal with this is to define the opacity of the pseudo-element to be zero  eg  element before    content   quot   quot     opacity  0

User · Answer

I needed this instead of using padding because I used inline-block containers to display a series of individual events in a workflow timeline  The last event in the timeline needed no arrow after it   Ended up with something like    transaction-tile after     content    f105       transaction-tile last-child after     content    00a0       Used fontawesome for the gt  chevron  character  For whatever reason  content  none   was producing alignment issues on the last tile

[css] Add a space (" ") after an element using :after

Examples related to css