2

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?

Improve this question
2
  • Strongly related, I think: stackoverflow.com/q/39091583/1207195 Commented Feb 4, 2018 at 20:54
  • 2
    I found that the space between .line and ::before could ruin things (using Firefox). Remove it. Commented Feb 4, 2018 at 20:57

2 Answers 2

Reset to default
4

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

That's literally my most favorite answer ever!
1

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.).

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.