Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Milan Milosevic
Milan Milosevic
6,647 Points

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

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

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

Milan Milosevic
Milan Milosevic
6,647 Points

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

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Milan,

No problem!

All the best,

Ede