Categories
General

Using ::marker to display content before content

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, 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">        
        <p id="p-marker-1">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?</p>
        <p id="p-marker-2">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?</p>
    </div>    

</body>
</html>