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.

Answer 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>