Ever wanted a piece of content before the content ?
Well …. there is <code>::before</code> which is what it is used for.
But there is another selector called <code>::marker</code> which is used for displaying content before a list item.
It is possible to display a non-list item as an item via <code>display: list-item;</code> to a div or p, so you don’t necessarily have to create a list like ul or ol.
According to <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::marker">Mozilla</a>, Only certain CSS properties can be used in a rule with ::marker as a selector and one of them is <code>content</code> which can be used to insert custom content.
What is not possible is, to absolute position the content in the marker as it’s not supported till now. So for now, we have to do with the left alignment with the text.
&lt;!DOCTYPE html&gt;




Marker





 <div id="div-marker"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, reprehenderit. Tenetur delectus repellendus eligendi fugit neque nulla adipisci tempora quam, error tempore repellat quibusdam esse officiis consequuntur vel nobis optio?
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, reprehenderit. Tenetur delectus repellendus eligendi fugit neque nulla adipisci tempora quam, error tempore repellat quibusdam esse officiis consequuntur vel nobis optio?
 </div> 



<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1653020067034/ECWckA9M3.png" alt />

Ever wanted a piece of content before the content ?

Well …. there is `::before` which is what it is used for.

But there is another selector called `::marker` which is used for displaying content before a _list item_.

It _is_ possible to display a non-list item as an item via `display: list-item;` to a div or p, so you don’t necessarily have to create a list like ul or ol.

According to [Mozilla](https://developer.mozilla.org/en-US/docs/Web/CSS/::marker), _Only certain CSS properties can be used in a rule with ::marker as a selector_ and one of them is `content` which can be used to insert custom content.

What is not possible is, to absolute position the content in the marker as it’s not supported till now. So for now, we have to do with the left alignment with the text.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Marker</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" crossorigin="anonymous"/>
<style type="text/css">
#div-marker
{
 width:500px;
 border:1px solid red;
}
#div-marker p
{
 display: list-item;
 margin-left:120px; 
}
#p-marker-1::marker
{
 content: "marker content : ";
}
#p-marker-2
{
 position: relative;
}
#p-marker-2::marker
{
 font-family: "Font Awesome 5 Free";
 content: "\\f005";
 font-weight: 900;

 position:absolute; /\* Won't work \*/
 top:25px; /\* Won't work \*/
}
</style>
</head>
<body>

 <div id="div-marker"> 
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, reprehenderit. Tenetur delectus repellendus eligendi fugit neque nulla adipisci tempora quam, error tempore repellat quibusdam esse officiis consequuntur vel nobis optio?
 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, reprehenderit. Tenetur delectus repellendus eligendi fugit neque nulla adipisci tempora quam, error tempore repellat quibusdam esse officiis consequuntur vel nobis optio?
 </div> 

</body>
</html>

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1653020067034/ECWckA9M3.png)

Using ::marker to display content before content