Category: CSS

To add horizontal scrollbar on top and bottom of table with CSS, we set the transform property.

For instance, we write

.parent {
  transform: rotateX(180deg);
  overflow-x: auto;
}

.child {
  transform: rotateX(180deg);
}

to rotate the element with class parent 180 degrees with transform: rotateX(180deg);.

And we rotate the element with class child in the element with class parent 180 degrees with transform: rotateX(180deg);.

To remove pseudo elements with CSS, we set the content property.

For instance, we write

p:after {
  content: none;
}

to remove the content after each p element by setting their content property to none.

To disable HTML links with CSS, we set the pointer-events property.

For instance, we write

<a class="disabled" href="#">...</a>

to add a link.

Then we write

a.disabled {
  pointer-events: none;
}

to disable the link with class disabled by setting the pointer-events property to none.

pointer-events: none; disables all mouse events.

To disable all div content with CSS, we set the pointer-events property.

For instance, we write

#my-div {
  pointer-events: none;
}

to select the div with ID my-div and disable all mouse events on it by setting pointer-events to none.

To pass mouse events through absolutely-positioned element with CSS, we set the pointer-events property.

For instance, we write

<div class="some-container">
  <ul class="layer-0 parent">
    <li class="click-me child"></li>
    <li class="click-me child"></li>
  </ul>

  <ul class="layer-1 parent">
    <li class="click-me child"></li>
    <li class="click-me child"></li>
  </ul>
</div>

to add elements.

Then we write

.parent {
  pointer-events: none;
}
.child {
  pointer-events: all;
}

to stop the parent mouse events with pointer-events: none;

And we make the child accept all the mouse events with pointer-events: all;.