CSS tricks you probably didn't know about.

Today I'm gonna share with you some cool css selectors.

Let's start with counter.

To style numbers in a numbered list, we need to play with properties called CSS counters. CSS counters let you adjust the appearance of content based on its location in a document.

<ul class="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>

li {
    font-size: 40px;
    margin-bottom: 20px;
    counter-increment: li;
}

.list li::before {
    content: counter(li);
    margin-right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: inline-block;
    background-color: #f3b70f;
    color: white;
    text-align: center;
    line-height: 50px;
}

::selection.

The ::selection pseudo-element applies to highlighted elements on the DOM. This is one of my favorite pseudo-elements. The syntax looks like this:

p::selection {
  color: white;
  background-color: green;
}

Next is the attr() function.

It's used to retrieve the value of an attribute of the selected element and use it in the stylesheet.

<h2 class="title" data-count="01">Section</h2>
<h2 class="title" data-count="02">Section</h2>
<h2 class="title" data-count="03">Section</h2>

.title {
    font-size: 35px;
    letter-spacing: 3px;
}

.title::before {
    content: attr(data-count);
    font-size: 1.2em;
    color: steelblue;
    margin-right: 10px;
}

Adding Stroke to Web Text

<h2>Css is Awesome</h2>

h2 {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 3px tomato;
}

Blog

CSS tricks you probably didn't know about.

Dima Prohorenko

Let's start with counter.

::selection.

Next is the attr() function.

Adding Stroke to Web Text

Join Our Newsletter. No Spam, Only the good stuff.

Related