Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

How to insert square before paragraph

I have some paragraphs , and I would like to insert filled black square (just like from list-style: square;) using p:before

Is it possible? I couldnt find square entity or hex code anywhere online.

Thanks in advance

1 Answer

Hi Milan,

The best glyph I found was a small middle dot, written into the CSS like this -

p::before {
    content: "\00b7";
    margin-right: 5px;
}

But what about just adding a div before the paragraph, and styling it how you like? Like this -

<div></div><p>This is a length of paragraph.</p>
div {
    width: 5px;
    height: 5px;
    background: #333;
    float: left;
    margin: 6px 6px 0 0;
}

All the best,

Ede

Thanks Ede!

I've also found that one for circle, was just hoping there is maybe some hex value for square, to avoid adding that div.

But thanks a lot!

Best

Hi Milan,

No problem!

All the best,

Ede