The Web Dev

Sometimes, we want to disable a link using only CSS.

in this article, we’ll look at how to disable a link using only CSS.

How to disable a link using only CSS?

To disable a link using only CSS, we set the pointer-events property.

For instance, we write

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

to add a link.

Then we write

.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.6;
}

to add pointer-events: none; to disable clicks on the link.

We set cursor: default; to set the cursor to the default arrow.

Conclusion

To disable a link using only CSS, we set the pointer-events property.

Sometimes, we want to right-align flex item with CSS.

In this article, we’ll look at how to right-align flex item with CSS.

How to right-align flex item with CSS?

To right-align flex item with CSS, we set the justify-content property.

For instance, we write

.main {
  display: flex;
}
.c {
  justify-content: flex-end;
}

to make the element with class main a flex container with display: flex;.

Then we right align the elements inside it with justify-content: flex-end;.

Conclusion

To right-align flex item with CSS, we set the justify-content property.

Sometimes, we want to center a "position: absolute" element with CSS.

In this article, we’ll look at how to center a "position: absolute" element with CSS.

How to center a "position: absolute" element with CSS?

To center a "position: absolute" element with CSS, we use flexbox.

For instance, we write

#parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

to make the element with ID parent a flex container with display: flex;.

Then we vertically align the items inside with align-items: center;.

We horizontally align the items inside with justify-content: center;.

Conclusion

To center a "position: absolute" element with CSS, we use flexbox.

Sometimes, we want to change the color of an hr element with CSS.

In this article, we’ll look at how to change the color of an hr element with CSS.

How to change the color of an hr element with CSS?

To change the color of an hr element with CSS, we set the border property.

For instance, we write

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

to set border-top to the border styles.

We set border to 0 to disable the default border.

Conclusion

To change the color of an hr element with CSS, we set the border property.

Sometimes, we want to position a div at the bottom of its container with CSS.

In this article, we’ll look at how to position a div at the bottom of its container with CSS.

How to position a div at the bottom of its container with CSS?

To position a div at the bottom of its container with CSS, we use flexbox.

For instance, we write

.parent {
  display: flex;
}

.child {
  align-self: flex-end;
}

to make the element with class parent a flex container with display: flex;.

Then we make the element with class child in the flex container stay at the bottom with align-self: flex-end;.

Conclusion

To position a div at the bottom of its container with CSS, we use flexbox.