Select ::after element using CSS3

January 22, 2023

I’m trying to get to the .dropdown::after element but only if the first child has the attribute x-placement set to bottom-start.

<div class="dropdown js-dropdown">
   <ul class="dropdown-menu js-dropdown-menu show" x-placement="bottom-start"
       ...
   </ul>

   <button class="btn dropdown-btn js-dropdown-btn">
       Enter salutation...
   </button>

   ::after
</div>

It seems to me that something like this should work, but unfortunately neither solution will work:

.js-dropdown [x-placement^=bottom] ~ ::after {
    background: red;
}

.js-dropdown [x-placement^=bottom] + ::after {
    background: red;
}

Is this even possible?

.js-dropdown [x-placement^=bottom] ~ ::after {
    background: red;
}

.js-dropdown [x-placement^=bottom] + ::after {
    background: red;
}

EDIT:

solved by

.js-dropdown {
  &.show {
    &:after {
      content: '';
      position: absolute;
      left: 1px;
      right: 0;
      height: 1px;
      background: $white-color;
      width: calc(100% - 2px);
      z-index: 13;
    }

    &:has([x-placement^=bottom]) {
      &:after {
        bottom: 0;
      }
    }

    &:has([x-placement^=top]) {
      &:after {
        top: 0;
      }
    }
  }
}

>Solution :

Sure you can, use the CSS :has() pseudo class:

.dropdown::after { content: "I'm an after pseudo element"; }

.js-dropdown:has([x-placement="bottom-start"])::after {
    background: red;
}

<div class="dropdown js-dropdown">
   <ul class="dropdown-menu js-dropdown-menu show" x-placement="bottom-start">
       <li>...</li>
   </ul>

   <button class="btn dropdown-btn js-dropdown-btn">Enter salutation...</button>
</div>