What is the best way to insert a character (::before) before an element?

I am trying to add a circle/dot using ::before on an element.

However, I cannot seem to make it visible!

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

and

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

(Still not showing)

I am unable to get this to work even with plain text

I understand that the content property only accepts text, but nothing appears when I try:

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

How can I make the dot using css ::before display?

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

What is the correct way to show this dot using ::before?

Answer №1

When using CSS :before and :after, the content property allows for special characters to be represented using escaped Unicode HEX.

Here's how you can achieve it:

Instead of using special characters directly like content: "•";, it is recommended to use the primitive Unicode representation to avoid issues with character sets in stylesheets. This can be achieved by finding the HEX value of the character we want to display.

To find the Decimal Numeric value of a character, you can open the Developer console and write:

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

The above code will give you the decimal value, which can be used in HTML as • to display the character •. Almost there...

Next, convert this value to Hexadecimal by writing:

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

This will give you the HEX value, and you'll get "2022".

CSS

content: "\2022";

JavaScript

someElement.textContent = "\u2022";

HTML •

•

:) Now, you can switch from using the decimal base • to always using the HEX value with the appropriate prefix (CSS\, HTML&#x, JS\u).


.line::before{
    content:'\2022';
}
<p class="line"> Lorem</p>

Answer №2

If you need to convert your dot into a CSS-readable entity, consider using the Entity Converter tool. This tool can generate the appropriate code for you such as: ::before { content: '\2022'; }. Just double-check that the font you're using supports this character or choose a backup font that does. Ensure you apply this transformation to a specific element with a selector like a or .someclass.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to apply -webkit-line-clamp to this JavaScript content using CSS?

i have a random-posts script for my blogger website <div class="noop-random-posts"><script type="text/javascript"> var randarray = new Array(); var l=0; var flag; var numofpost=10; function nooprandomposts(json){ var total = ...

Issue with CSS background color not extending to full screen in webkit browsers when using 960.gs grid system

When using 960.gs, I have created a login screen with a div for the login form that has a background image. This div is positioned below a header, which centers it in the browser window. In my CSS, I am setting the body color as follows: body { backgr ...

The presence of inline display causes gaps of white space

Located at the bottom of this webpage is a media gallery. The initial three images comprise the photo gallery, followed by video thumbnails inlined afterwards. However, there seems to be an issue with the alignment of each element within the video gallery. ...

Adjust the dimensions of a nested element within a container that has padding applied

After browsing through numerous similar questions regarding this issue, I have not been able to find a solution that works for my specific case. The HTML code in question is as follows: a{ display: block; padding: 3px 20px; clear: both; font-weight: ...

Semantic UI Troubles: Unraveling the Sidebars and #pusher Defects

Hey there, I could really use some assistance with an issue I'm facing. I have this particular structure that's causing me trouble. <div id="toolbar" class="toolbar overlay-displace-top clearfix toolbar-processed"> ... </div> < ...

The implementation of subnavbars within a navigation bar using HTML and CSS

I am looking to align the Login button with the settings icon on the same line above the links in my navbar. Is there a way to accomplish this? Check out this fiddle that demonstrates my issue: FIDDLE Here is the code I have written: <body> < ...

Retrieve the background color using code-behind

Despite its humorous appearance, I am having trouble with the Syntax :( I have a background color in my code behind file and need to correct the syntax here so that my Table displays the correct background color: <Table style="background-color:" &apos ...

JavaScript accordions failing to open

I've encountered an issue with my website that includes JS accordions. Strangely, they are not opening on the live site, but they function properly on Codepen. I checked the console in Chrome and found no error messages, however, when I looked at the ...

What can I do to adjust the position of the div wrapper if the floating sidebar is taller than

Check out this example http://jsfiddle.net/NuzDj/ When you resize the window, the sidebar overlaps with the wrapper and footer. Is there a way to automatically adjust the height of the wrapper when the sidebar overlaps with it? ...

The edge of the 'parent' element is obscured by the :after element

I am trying to create a transparent outlined button with a shadow in the shape of the button. However, I am facing an issue where the border of the button appears behind the :after element. You can see the problem below. Adding overflow: hidden to the tog ...

Conceal DIV containers during the loading of the page, and reveal them only upon the selection of Radio Buttons

In my user interface, I have implemented three radio buttons labeled as "Easy," "Medium," and "Hard." Each button is assigned to a distinct Javascript function that manipulates the visibility of corresponding div elements. The main purpose behind this setu ...

Building a collapsible toggle feature with an SVG icon using HTML and CSS

I am trying to swap a FontAwesome Icon with a Google Materials SVG Icon when a collapsible table button toggle is pressed (changing from a down arrow to an up arrow). I have been struggling to get the Google Material Icons code to work. How can I resolve t ...

Retrieving CSS properties of an element using JavaScript

How can I efficiently retrieve all CSS rules associated with a specific element using JavaScript? I am not seeking a particular solution, just looking to capture all CSS rules for the given element. For example, consider the following HTML code: <div ...

React Navigation Item Toolbar Misplacement

I've been trying to align the navigation item with the logo on the same line within the toolbar, but I'm facing an issue where they keep appearing in different rows. To see the error for yourself, check out the code sandbox here. This is how I s ...

Express Node + Styling with CSS

I am in need of a single EJS file (configuration includes Express and Request). app.get('/space', function(req, res){ res.render('space.ejs'); }); The file successfully renders, but only two out of three CSS stylesheet links work ...

Include a proximity button onto the tabs

Currently, I'm diving into learning Bootstrap and one thing I'd like to implement is having an x next to each tab name for easy closing: <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

Dynamically Allocating Page Heights

I am tasked with creating an ASP.NET MVC page that will display a template of controls. The controls will be retrieved from an XML file. One issue I am facing is that the number of controls is not fixed, so the page height needs to be dynamic. Our site has ...

What is causing my HTML wrapper to malfunction?

Below is the HTML code for my website: <div id="wrapper"> <div id="header"> <img src="images/MyBannerFinished.jpg" alt="Header" width="803" class="headerimage" /> </div> <!--- End Header ---> <div id="navbar"> <ul ...

Website loses its css after printing

I'm having trouble printing a website with a simple layout featuring two columns, each containing tables. The website I want to print is located at the following link: . However, when I try to print it using the JavaScript function window.print(), the ...

Discovering the block's height with the power of Jquery

I have written a piece of code that sets the height of a block of text and then applies that height to an image within the block. However, the size of the image ends up being smaller than the size of the block. https://i.stack.imgur.com/QUFWy.png <scr ...