How to count project titles on portfolio page? - with counter increment -

Site URL: https://www.orsolyaoszabo.com/links

Hello, 

Anyone can help me fix this?

I wanna count the project titles on a portfolio page with a different font, and I'm figured out a css snippet which looks nice, only problem that it does not count the titles. Ideally, it would show "01" before the first one, "02" before the second one, and so on.

There might be some class name, I'm missing. 

Im using this snippet so far:

.portfolio-hover-item-content:before {
    content: "0" counter(menu-item-counter);
    font-family: poppins;
    font-style: normal;
    font-weight: 500;
    font-size: .825rem;
    line-height: 1.2em;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #161513;
    position: absolute;
    top: 40px !important;
    left: -28px;
}
.portfolio-hover-item-content{
    counter-increment: menu-item-counter;
    position: relative;
}

.portfolio-hover-item-content {
    counter-reset: menu-item-counter;
    justify-content: flex-start;
  }
 @media (max-width:991px){ .portfolio-hover-item-content:before {
    content: "0" counter(menu-item-counter);
    font-family: poppins;
    font-style: normal;
    font-weight: 400;
    font-size: .625rem;
    line-height: 1.2em;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #161513;
    position: absolute;
    top: 10px !important;
    left: -20px;
}}

www.orsolyaoszabo.com/links

Thanks a lot,

Orshi

It looks like you figured it out?

<style>
 .portfolio-hover-item:before {
    content: "0"counter(portfolio-hover-item-counter);
    font-family: poppins;
    font-style: normal;
    font-weight: 500;
    font-size: .825rem;
    line-height: 1.2em;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #161513;
    position: absolute;
    top: 50px !important;
    left: -12px !important;
}
.portfolio-hover-item{
    counter-increment: portfolio-hover-item-counter;
    position: relative;
}

.portfolio-hover-item {
    justify-content: flex-start;
  }
  @media (max-width:991px){ .portfolio-hover-item:before {
    content: "0" counter(portfolio-hover-item-counter);
    font-family: poppins;
    font-style: normal;
    font-weight: 400;
    font-size: .625rem;
    line-height: 1.2em;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #161513;
    position: absolute;
    top: 20px !important;
    left: 0px !important;
}}
</style>

On 2/7/2022 at 11:04 AM, tuanphan said:

It looks like you figured it out?

<style>
 .portfolio-hover-item:before {
    content: "0"counter(portfolio-hover-item-counter);
    font-family: poppins;
    font-style: normal;
    font-weight: 500;
    font-size: .825rem;
    line-height: 1.2em;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #161513;
    position: absolute;
    top: 50px !important;
    left: -12px !important;
}
.portfolio-hover-item{
    counter-increment: portfolio-hover-item-counter;
    position: relative;
}

.portfolio-hover-item {
    justify-content: flex-start;
  }
  @media (max-width:991px){ .portfolio-hover-item:before {
    content: "0" counter(portfolio-hover-item-counter);
    font-family: poppins;
    font-style: normal;
    font-weight: 400;
    font-size: .625rem;
    line-height: 1.2em;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #161513;
    position: absolute;
    top: 20px !important;
    left: 0px !important;
}}
</style>

 

YESS I did !! 

but thanks, anyway 🙂