How do I put character • ::before an element?

Question

I want to put a circle/dot ::before an element

&#8226

•

nothing I am doing is visible!

.line ::before{
    content:'&#8226';
    }

and

.line ::before{
    content:'•';
    }

(I see nothing)

I can't get this to work even with just text

I know content only accepts text, but I still don't see anything if I do:

.line ::before{
    content:'xxx';
    }

How do I get css ::before to show up?

(note: the css rule is in the default style sheet on page load so it should be applying to any new element ...)

How do I display this dot in ::before?

Answer 1

CSS :before and :after's content accepts escaped \ Unicode HEX representation of a character.

Let's learn how to get to it:

We could use content: "•"; but since we were thought to avoid special characters in favor of their primitive Unicode representation so that we don't get caught in defining @charset "utf-8"; in stylesheets and saving as such. Let's find such HEX value!

Open up Developer console and write:

"•".charCodeAt(0)               // 8226     ( base10 )

the above will yield 8226 which is the Decimal Numeric value we generally use in HTML like • to get •. Almost there...
Now let's do:

"•".charCodeAt(0).toString(16)  // "2022"   ( base16 )

console.log(
    "•".charCodeAt(0).toString(16)
)

to get a String at base 16, so Hexadecimal! And you'll get "2022".

CSS

content: "\2022";

JavaScript

someElement.textContent = "\u2022";

HTML •

•

:) exactly! You can now abandon decimal base • and always stick to HEX value by simply using the right prefix (CSS\, HTML&#x, JS\u).

---

.line::before{
    content:'\2022';
}

<p class="line"> Lorem</p>

Answer 2

You can use a tool like Entity Converter which will convert your dot to a CSS-exploitable entity: ::before { content: '\2022'; }. Make sure the font your are using has that character in its character set, or that you use a fallback font that supports that character. Also, make sure you are applying this to a specific element with a selector (a, .someclass, etc.).