Adding small words to portfolio headings

How to add smaller text next to a portfolio heading like in this image:

This is possible with code, HTML and CSS, or potentially just CSS and ::after with content, it would depend on your setup. Can you share your website URL and this page?

A

#UNIQUESQUARESPACEID h1::after {
  content: "smaller type message here";
  font-size: small;
  margin-top: -10px;
/* other alignment rules likely needed */
}

Without seeing your site we would need to make several assumptions here, but something like this should work.

Sorry, my website is: https://www.rotaterecordings.com

This is the code I tried using: 

/* Add subtitle */

h1.portfolio-title:after {
    font-size: 20px;
    color: black;
}
a.portfolio-hover-item[href="/grid-simple/project-one-efc56"] h1:after {
    content: “FRESH”;
}

because I wanted to use different subtitles for each portfolio title

On 3/8/2023 at 8:47 AM, Indi said:

This is the code I tried using: 

 

/* Add subtitle */

h1.portfolio-title:after {
    font-size: 20px;
    color: black;
}
a.portfolio-hover-item[href="/grid-simple/project-one-efc56"] h1:after {
    content: “FRESH”;
}

 

because I wanted to use different subtitles for each portfolio title

Did you solve with this code or still need help?

@tuanphan  Still need help, this code didn't work.

@tuanphan Thank you, that worked perfectly.

Do you know how I could move the text so it was above the main heading word? Like in the image attached?

On 5/3/2023 at 1:11 PM, Indi said:

@tuanphan Thank you, that worked perfectly.

Do you know how I could move the text so it was above the main heading word? Like in the image attached?

Change top code

.portfolio-hover-items-list>a span:after {
    display: inline;
    font-size: 20px;
}

to this

.portfolio-hover-items-list>a span:after {
    display: inline;
    font-size: 20px;
    position: relative;
    top: -30px;
}