JSFiddle - React, Tailwind, and code Playground

by usmanajmal

HTML

<div class="parent">
  
  <div class="line" style="">
    <span class="text">AND</span>
  </div>
</div>

SCSS

.line {
    text-align: center;
    border-bottom: 1px solid gray;
    line-height: 0.1em;
    width: 100%;
    margin: 10px 0 20px;
}
.text {
    color: green;
    background: black;
    padding: 0 10px;
}

.parent {
  background: #000;
  display: flex;
  align-items: center;
  height:100px;
}


.parent:hover {
  background: #eee;
}

:host-context(.parent:hover) {
  .text {
    background: #eee;
  }
}