Problems with different pseudo-elements sharing CSS code

Question

Lesson Learned ... Don't try to deal with coding issues when jet-lagged and blind from exhaustion. Apologies.

I can not combine both a ::before and ::after pseudo-element that share the same CSS.

I have two versions of a logo, with the circle at opposite ends. The CSS for each version is identical, except for the pseudo-element attached to the class name.

.rgt .logoname::after {
  content: url("circle.svg");
  display: inline-block;
  width: 2.15em;
  position: absolute;
  z-index: -1;
  right: -0.82em;
  top: -0.55em;
}

.lft .logoname::before {
  content: url("circle.svg");
  display: inline-block;
  width: 2.15em;
  position: absolute;
  z-index: -1;
  left: -0.82em;
  top: -0.55em;
}

When I try to combine the two classes, separated by a comma (as below) the ::after overrides the ::before and so the circle only appears at the end of the name for each one. I have tried switching the sequence that the classes appear, with the same result.

.lft .logoname::before, .rgt .logoname::after {
  content: url("circle.svg");
  display: inline-block;
  width: 2.15em;
  position: absolute;
  z-index: -1;
  right: -0.82em;
  top: -0.55em;
}

The basic code that we are using is below. The lft (left) or rgt (right) class is applied to the grandparent of logoname to determine which version of the logo we are using in that spot. It also controls postioning of the tease element.

<div class="logowrap light lft">
  <div class="logobox">
    <div class="logoname">PEDALERS</div>
    <div class="tease">ride, eat, relax</div>
  </div>
</div>

<div class="logowrap dark rgt">
  <div class="logobox">
    <div class="logoname">PEDALERS</div>
    <div class="tease">ride, eat, relax</div>
  </div>
</div>

Is there something in the CSS specs that prohibits having two different pseudo-elements share the same CSS code?

While it is not a hardship to have both if necessary, it is just puzzling me as to why.

"Is there something in the CSS specs that prohibits having two different pseudo-elements share the same CSS code?" - no, of course not. Your problem is that they both have the exact same properties set with second version - but your ::before element needs left: -0.82em, whereas you are setting it to right: -0.82em now, same as for the ::after element. — C3roe
– C3roe, Commented May 16, 2025 at 9:41
@C3roe - When they are separate with the exact same properties (first example), both work exactly as desired. But when we combine them (second example), the issue occurs. — MrCycling
– MrCycling, Commented May 16, 2025 at 9:47
How are right: -0.82em and left: -0.82em "the exact same properties"? — C3roe
– C3roe, Commented May 16, 2025 at 9:52
You'd have to use your combined version, followed by .lft .logoname::before { right: auto; left: -0.82em; }, to actually recreate what the two individual assignments did. — C3roe
– C3roe, Commented May 16, 2025 at 9:53

Naren Murali · Accepted Answer · 2025-05-16 09:54:10Z

1

I think you are misunderstanding, the before means, it is stacked before(behind) the element, the after means it is stacked after(above) the element. Like stacking paper. You need extra CSS to adjust the position of the pseudo element.

.lft .logoname::before,
.rgt .logoname::after {
  content: url("https://placehold.co/20x20/000000/dfdfdf/png");
  display: inline-block;
  width: 2.15em;
  position: absolute;
  z-index: -1;
}

.lft .logoname::before {
    left: -22px;
    top: 0px;
}

.rgt .logoname::after {
    right: -22px;
    left: 85px;
}

.logoname {
  position: relative;
}
.logobox {
    display: flex;
    align-items: center;
    flex-direction: column;
}

<div class="logowrap light lft">
  <div class="logobox">
    <div class="logoname">PEDALERS</div>
    <div class="tease">ride, eat, relax</div>
  </div>
</div>

<hr />
<br/>
<div class="logowrap light rgt">
  <div class="logobox">
    <span class="logoname">PEDALERS</span>
    <span class="tease">ride, eat, relax</span>
  </div>
</div>

edited May 16, 2025 at 9:54

answered May 16, 2025 at 9:32

Naren Murali

67.2k6 gold badges54 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

MrCycling May 16, 2025 at 9:35

Sorry I was clearer, we would change the rgt and lft depending on which version we wanted.

Naren Murali May 16, 2025 at 9:36

@MrCycling then only one of them will be shown, since either rgt or lft, so what is the issue?

MrCycling May 16, 2025 at 9:40

the issue is when the classes are combined, the circle is always shown in the after position not before.

Naren Murali May 16, 2025 at 9:43

@MrCycling I think you are misunderstanding, the before means, it is stacked before(behind) the element, the after means it is stacked after(above) the element. Like stacking paper. You need extra CSS to adjust the position of the pseudo element

MrCycling May 16, 2025 at 9:54

I understand how before and after work. And both work fine when they are separated. What I don't understand is why the divs that are supposed to be before are treated as after when the classes are combined with a comma. My understanding is that each should be treated with the same CSS code.

|

Collectives™ on Stack Overflow

Problems with different pseudo-elements sharing CSS code

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related