5 Hidden CSS Properties You Didn't Know Existed

Cascading Style Sheets (CSS) are the backbone of web design, allowing developers to style and format web pages with ease. While most developers are familiar with the common CSS properties like color, font-size, and margin, there are numerous lesser-known properties that can add functionality to your designs. In this article, uncover five CSS properties that you may not have known existed, but which can significantly enhance your web development projects.

1. Text-decoration

.menu__list-link:hover {
  text-decoration: underline 2px solid green;
}

Turn out for the classic text-decoration: underline you can add 3 more parameters. First is the width of the line (2px), second is the type of line (solid, dotted) and the third is the color for this line (green).

2. Text-underline-offset

.menu__list-link:hover {
  text-decoration: underline 2px solid green;
  text-underline-offset: 6px;
}

It is very handy. Solve problem that occur pretty often, when some letters go below the line height and during hover effect underline interrupts by those letters. Pretty good solution to create offset from text to underline (6px).

3. Inset

For positioning relative, absolute, and others we often write top, right, bottom, left:

  top: 5px;
  right: 3px;
  bottom: 1px;
  left: 4px;

to speed up the process of writing we can write above in a shorter version with the property inset:

inset: 5px, 3px, 1px, 4px;

4. Object-position

We often apply to the image object-fit: cover - it will crop the image to a specified height & width in order to look sharp:

But we can't control which part of the image it will crop. So it is where object position comes into play.

.test {
  height: 350px;
  width: 500px;
  object-fit: cover;
  object-position: bottom;
}

object-position: top;

As well as we can add: left or right. Or even can be more precise when we specify 2 parameters like object-position: center bottom;

5. Scroll margin top

By default, when we link to section on the page <a href="#fairy-tale__inner">Itinery</a> it will bring exactly to the top of that section.

But if we want to make space we need to use scrool-margin-top

#fairy-tale__inner {
  scroll-margin-top: 100px;
}

So go ahead, dive into the world of hidden CSS properties, and elevate your designs to the next level!