Using ::marker to display content before content

PublishedNovember 1, 2020

I am a web developer from Navi Mumbai. Mainly dealt with LAMP stack, now into Django and getting into Laravel and Cloud. Founder of nerul.in and gaali.in

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

@supports API

Check if a CSS feature is ready in a browser or not and apply code for both scenarios

Jan 23, 20262 min read

Using the :has selector to display full with of a container

The :has selector can be used to make a 100% iframe's container to be also 100%

Feb 26, 20232 min read

Using the :has selector to display full with of a container

first-of-type

Catch the first element type that's a child of a parent element

Nov 25, 20222 min read

Text Input Validation & Error without JavaScript

Use HTML5 properties and advanced CSS attributes for validation

Jul 11, 20222 min read

Text Input Validation & Error without JavaScript

Mega Menu using CSS only

Demo : http://s3.css.co.in/demo/mega-menu.html Code : https://gist.github.com/anjanesh/876b781b69fff9598fd73ffeda4b9318 Sorry for no explanation here. #top-menu-1 > div > a + div:hover has to be displayed as block too. For people who know CSS, I thin...

Jan 9, 20211 min read

CSS

13 posts

Styles of the Web

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>

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?

#content #general #marker

Command Palette

Comments

More from this blog