Can this div x with a circle be written differently?

Wanted to know if how I have this written, if it could be written differently.

https://jsfiddle.net/3q216duL/

.crosssign {
  display: inline-block;
  width: 36px;
  height: 36px;
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
  left: 0;
  transform: rotate(45deg);
  border-radius: 50%;
  animation: fadeInExit 4s forwards;
  opacity: 0;
  pointer-events: none;
  clip-path: circle(50%);
}

@keyframes fadeInExit {
  99% {
    pointer-events: none;
  }

  100% {
    pointer-events: initial;
    opacity: 1;
  }
}

.exit {
  border: 5px solid red;
}

.crosssign_stem,
.crosssign_stem2 {
  position: absolute;
  background-color: red;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.crosssign_stem {
  width: 46px;
  height: 5px;
}

.crosssign_stem2 {
  width: 5px;
  height: 46px;
}
    <span class="crosssign exit">
      <div class="crosssign_stem"></div>
      <div class="crosssign_stem2"></div>
    </span>

Not ‘could be’ but ‘should be’ written differently as that html is completely invalid. Please follow the rules of valid html. (You have been told numerous times about block elements and inline elements.)

You cannot nest a div inside a span.

Notwithstanding the above I believe I gave you an answer to this some time ago in one of your other demos.

I just created multiple different versions here: https://jsfiddle.net/bLvhs0f2/

Using everything I have saved.

Go back and change all the ones that wrap a span around divs.

This then:

<div class="crosssign exit3">
  <div class="crosssign_stem"></div>
  <div class="crosssign_stem2"></div>
</div>
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.