× Got a CSS, HTML or webdesign question? Ask it here!

Add Content to ul li With CSS

1 year 5 months ago - 1 year 5 months ago #16303 by hotrodsue@windstream.net
Hello, new to forum. Editing this post to make shorter, in hopes of getting help. Please advise if this is not the correct place to get help/support for this issue.

This is my DecoNetwork home page: Home Page

Directly under the heading "Select a Product to Customize", there are 6 products that represent 6 categories. I want to add content (category title heading) above each image. For example T-Shirts, Outerwear, etc.

I've watched the video: Inserting content on your DecoNetwork website with CSS

Using firebug to edit CSS, to view area to add content. When I Add Rule in CSS as follows, I’m close, but not quite there.
ul#create_list.row li :nth-child(-n+6)

Below is image of html of home page ul, and an image with the result I get using the nth-child code above and set background to yellow.






I think I need to use the ::before to add a line of text before each li child.

Can anyone direct me to how to get the content added on top of each of the 6 products? Many thanks in advance for helping.
Attachments:
The following user(s) said Thank You: sticky

Please Log in or Create an account to join the conversation.

1 year 5 months ago #16319 by brenden
Hi,

You would use the following CSS:
#create_list .display:nth-child(1)::before {
    content: "Heading here...";
}

Take note of nth-child(1): Keep changing this number for the 2nd, 3rd, 4th, etc. i.e.:
#create_list .display:nth-child(1)::before {
    content: "First heading...";
}

#create_list .display:nth-child(1)::before {
    content: "Second heading...";
}

#create_list .display:nth-child(1)::before {
    content: "Third heading...";
}

#create_list .display:nth-child(1)::before {
    content: "Fourth heading...";
}

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Please Log in or Create an account to join the conversation.

1 year 5 months ago #16348 by hotrodsue@windstream.net
That did it! Thank you so much for your help! I'm making great progress on this journey. All thanks to your help, as well as videos, DecoNetwork support team, and blogs. Much appreciated. Have a wonderful day.

Please Log in or Create an account to join the conversation.

1 year 5 months ago #16357 by brenden
Awesome! I'll pass on your comments to our team. Many thanks!

Cheers,

Senior Product Manager
Wilcom - Sydney, Australia



Please Log in or Create an account to join the conversation.

Time to create page: 0.171 seconds
Powered by Kunena Forum