css before and after pseudo elements code example

Example 1: css before after

The ::before and ::after pseudo-elements in CSS allows you to insert content onto a page without it needing to be in the HTML. While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:

div::before {
  content: "before";
}
div::after {
  content: "after";
}
<div>
  before
  <!-- Rest of stuff inside the div -->
  after
</div>

The only reasons to use one over the other are:

You want the generated content to come before the element content, positionally.
The ::after content is also “after” in source-order, so it will position on top of ::before if stacked on top of each other naturally.

Example 2: css before is not working

.chart ul:after{
  content: "";
  border:1px solid #f30;
}

Example 3: pseudo elements css

psuedo element(An intuitive answer):
							keywords added to selectors (which are followed by 
                            colon ':' or double colon '::') which allow to target
                            specific element (or specific part of element).
example:
 you can style the first letter of a paragraph as->  p:first-letter{/*styles*/}

STRONG NOTE:  Keep in mind that  ::first-line pseudo-element  must be applied
			  to block level (elements which break line on use)
			  elements in order to take effect.

Example 4: css pseudo elements

h2::first-letter {}
p::first-line {}
p::selection {background-color: red;}
::after / ::before