Utilizing the '::marker' pseudo-element for generating Markdown-inspired headers

Question

Utilizing the '::marker' pseudo-element for generating Markdown-inspired headers

This code snippet is functioning correctly, however, I have a suggestion to make it more appropriate. Instead of using '::before', why not try using '::marker'? I attempted this adjustment but encountered an issue. Can anyone explain why it didn't work as expected?

h1::before{content:'# '}
h2::before{content:'## '}

<h1>Level-1 heading</h1>
<h2>Level-2 heading</h2>

h1,h2,h3,h4,h5,h6{display:list-item}
h1::marker{content: '# '}
h2::marker{content: '## '}

<h1>Level-1 heading</h1>
<h2>Level-1 heading</h2>

html css css-selectors pseudo-element

Answer 1

Answer №1

Your content should not consist of list items, but rather headings according to the reference: "selects the marker box of a list item" which can be found here

To further explain why you need a container for these items, I have provided one with the default UL style:

.list-container {
  display: block;
  list-style: disc outside none;
  margin: 1em 0;
  padding: 0 0 0 40px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  display: list-item;
}

h1::marker {
  content: '# ';
}

h2::marker {
  content: '## ';
}

<div class="list-container">
  <h1>Level-1 heading</h1>
  <h2>Level-1 heading</h2>
</div>

Answer 2

Your content should not consist of list items, but rather headings according to the reference: "selects the marker box of a list item" which can be found here

To further explain why you need a container for these items, I have provided one with the default UL style:

.list-container {
  display: block;
  list-style: disc outside none;
  margin: 1em 0;
  padding: 0 0 0 40px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  display: list-item;
}

h1::marker {
  content: '# ';
}

h2::marker {
  content: '## ';
}

<div class="list-container">
  <h1>Level-1 heading</h1>
  <h2>Level-1 heading</h2>
</div>

Utilizing the '::marker' pseudo-element for generating Markdown-inspired headers

Answer №1

Similar questions

Utilization of z-index with float: left within an image gallery in CSS

Guide to showcasing associated information in HTML using Angular 7

Activate a click on a div element to enable smooth scrolling when using the page down and page up keys

How to implement jQuery CSS hover effect using jQuery?

How to extract a one-of-a-kind identification number from the browser using just JavaScript in a basic HTML file?

Fetching JSON data cross-domain with the help of JavaScript or JQuery

Verify if an item is already present in the HTML document before adding a new item to it using Ajax

Struggling with evenly positioning 6 elements in two rows using CSS

Tips for converting JSON information on a website and inserting it into a designated division?

The Parent Div is styled with a background color, and I would like the sub div to inherit the background from whatever is behind the

What is the best way to show only one div at a time when selecting from navbar buttons?

What steps should I take to correct the alignment of this grid using CSS?

Modifying canvas border colors using AngularJS

The div's height is not matching the CSS declaration as expected

Buttons containing two lines of text appear bigger compared to those with only one line of text, but it is essential for all buttons to be consistent in size with the single line buttons

A picture placed side by side with a list

Issues arise with Ajax/PHP not displaying subsequent posts after the initial one

What is the best way to send a JavaScript variable to PHP for storage in a WordPress database?

How to Use PHP to Submit Form Information

Why isn't the document.getElementById().value() function functioning properly within my PHP code?