7

Before moving to my question, I know how the :before and :after selectors work. (not a duplicate of what is ::before or ::after expression). My question is in regards to use.

I've seen some inconsistencies over the years where these selectors have been used to display the same thing. Same results, different approach. In some specific cases, such as adding a font awesome icon within an li before the a the :before selector makes sense. I'm not inquiring about that use, since it's intuitive enough to understand. But take a speech bubble for a tooltip for instance. I have seen the triangle placed with a :before and also with an :after and in some occasions they use both! I'm confused.

What is the determining factor on choosing which selector should be used to attach an element such as the triangle on a speech bubble?

Allow me to demonstrate:

HTML

<div class="container">
    <div class="bubble">This is my text in a bubble using :after</div>
    <div class="bubble2">This is my text in a bubble using :before</div>
</div>

CSS

.bubble{
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #000;
  background: #f3961c;
  border-radius: 10px;
  background: linear-gradient(top, #f9d835, #f3961c);
}

.bubble:after {
  content: "";
  display: block; 
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #f3961c transparent;
}


.bubble2 {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #000;
  background: #f3961c;
  border-radius: 10px;
  background: linear-gradient(top, #f9d835, #f3961c);
}

.bubble2:before {
  content: "";
  display: block; 
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #f3961c transparent;
}

IMG

enter image description here

Please don't tell me it's just a matter of preference. lol

DEMO

Community
  • 1
  • 1
LOTUSMS
  • 10,317
  • 15
  • 71
  • 140
  • 7
    It's a matter of preference, lol. – deceze Jan 16 '16 at 14:05
  • 1
    Well, seriously, in hacky cases such as adding speech bubble triangles, either works, since it's neither really "before" nor "after". In other situations, where you actually add something before or after *text*, it makes a difference. – deceze Jan 16 '16 at 14:06
  • When you use absolute positioning .... it's a matter of preference – vals Jan 16 '16 at 14:07
  • 1
    @deceze I was afraid of that. lol. Seems like w3c should've come up with an :attach selector for these kind of cases. – LOTUSMS Jan 16 '16 at 14:45
  • To be fair, I think in September 2009 the W3C didn't at all anticipate that `::before` and `::after` might end up being used to insert non-textual content. See: https://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html#before-after-content – Rounin Jan 16 '16 at 14:56
  • Both ::after and ::before pseudo selectors are used to create tooltip arrows with that "triangle with border effect", because the arrow itself is a border, so you can't add border to it by using only ::before or only ::after. https://stackoverflow.com/questions/9450733/css-triangle-custom-border-color – mohsinulhaq Aug 06 '18 at 06:48

1 Answers1

6

The naming of ::before and ::after is not entirely arbitrary, but it only really makes sense when the content of those pseudo elements is displayed inline, just before or just after the content of the element they are attached to.

As soon as you use

position: absolute;

in a pseudo element (which is totally legitimate), it no longer matters whether that pseudo element is named ::before or ::after.

It might just as easily be named ::presentational-frill-1 or ::presentational-frill-2.

Rounin
  • 27,134
  • 9
  • 83
  • 108
  • Well, it still has to follow syntax, right? So if I changed it to :blank or even make up my own :attach it won't work – LOTUSMS Jan 16 '16 at 14:39
  • 2
    Yes, you're absolutely right, @LOTUSMS. My use of the passive above was ambiguous - when I wrote _"It might just as easily be named"_ I didn't mean by you, I meant by the W3C. – Rounin Jan 16 '16 at 14:43
  • gotcha. Well, seems to me W3C should've come up with an :attach pseudo-element for situations such as these – LOTUSMS Jan 16 '16 at 14:44
  • I've never thought about this before, but I agree with you wholeheartedly. If pseudo-elements in the real-world are quite often used in a way which makes their labels _before_ and _after_ meaningless (they are), why not (instead) call pseudo-elements _::attach1_, _::attach2_, _::attach3_... _::attach**n**_ – Rounin Jan 16 '16 at 14:47
  • 1
    I'm assuming this would probably make more sense when jQuery comes in play. Such as targeting the :after our the :before programmatically – LOTUSMS Jan 16 '16 at 14:55
  • 1
    "why not (instead) call pseudo-elements _::attach1_, _::attach2_, _::attach3_... _::attach**n**_" Because those names suggest nothing about where exactly these pseudo-elements should be generated wrt the originating element (although it becomes less important once absolute positioning comes into play, the spec still has to define this somewhere). The **n** aspect for specifying an arbitrary number of pseudo-elements was addressed in the old css3-content as `::before(n)` and `::after(n)`, but it has since been removed as nobody bothered to implement it in the past 13 years. – BoltClock Jan 17 '16 at 05:27
  • I'm all for `::before(n)` and `::after(n)`. – Rounin Jan 17 '16 at 10:10