Categories
CSS

How to remove pseudo elements with CSS?

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.

Categories
CSS

How to disable HTML links with CSS?

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.

Categories
CSS

How to disable all div content with CSS?

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.

Categories
CSS

How to pass mouse events through absolutely-positioned element with CSS?

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;.

Categories
CSS

How to vertically align text in a div with CSS?

Sometimes, we want to vertically align text in a div with CSS.

In this article, we’ll look at how to vertically align text in a div with CSS.

How to vertically align text in a div with CSS?

To vertically align text in a div with CSS, we use flexbox.

For instance, we write

<ul>
  <li>
    <p>Some Text</p>
  </li>
  <li>
    <p>A bit more text that goes on two lines</p>
  </li>
  <li>
    <p>Even more text that demonstrates how lines can span multiple lines</p>
  </li>
</ul>

to add some elements.

Then we write

li {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
}

to make the li elements flex containers with display: flex;.

And then we set the flex direction to vertical with flex-direction: column;.

We vertically center content with justify-content: center;.

And we horizontally center content with align-content: center;

Conclusion

To vertically align text in a div with CSS, we use flexbox.