<p class="one"> div one</p>

<p class="two"> div two</p>

<p class="three"> div three</p>

<p class="four"> div four</p>

<p class="five"> div five</p>

<p class="six"> div six</p>

p::after {
  content: " content in :after";
  color: #c74300;
}

p.one::after:hover {
  content: ' content in :after:hover';
  color: #bcd382;
}

p.two:hover::after {
  content: ' content in :hover:after';
  color: #3D0079;
}

p.three::first-line {
  color: #505423;
}

p.five::first-line:hover {
  color: #3D0079;
}

p.five:after::first-line {
  color: #3D0079;
}

p:hover.six::first-line {
  color: #3D0079;
}

p {
  padding: 1.5rem;
  background-color: #bbb;
  max-width: 8rem;
  margin-inline: 1rem;
  margin-block: 1rem;
  display: inline-block;
  cursor: pointer;
}