css pseudo elements content code example

Example 1: css content property

CSS Syntax
content: normal|none|counter|attr|string|open-quote|close-quote|no-open-quote|no-close-quote|url|initial|inherit;

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style: none; /* Remove HTML bullets */
  padding: 0;
  margin: 0;
}

li { 
  padding-left: 16px; 
}

li::before {
  content: ">"; /* Insert content that looks like bullets */
  padding-right: 8px;
  color: blue; /* Or a color you prefer */
}
</style>
</head>
<body>

<h1>The content Property</h1>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

</body>
</html>

Example 2: pseudo elements css

::after 	Matches a stylable element appearing after the originating element's actual content.
::before 	Matches a stylable element appearing before the originating element's actual content.
::first-letter 	Matches the first letter of the element.
::first-line 	Matches the first line of the containing element.
::grammar-error 	Matches a portion of the document containing a grammar error as flagged by the browser.
::marker 	Matches the marker box of a list item, which typically contains a bullet or number.
::selection 	Matches the portion of the document that has been selected.
::spelling-error 	Matches a portion of the document containing a spelling error as flagged by the browser.

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.

Tags:

Html Example

Recent Posts