Megalith

Tip: Pseudo-classes are with one colon. Pseudo-elements are written with two colons. By default, any pseudo-element is an inline element.

Example to un-italicize and give some space to a book emoji in a h1 element:

h1::first-letter {
  font-style: normal;
  margin-right: 5px;
}

Another good use is to make only the first letter font bigger:

h3::first-letter {
  font-size: 80px;
}

If you want all of your first-lines of ALL your paragraphs to be a different color then the rest of the paragraphs:

p::first-line {
  color: red;
}

Tip: to choose the “adjacent sibling selector”, for example, to choose the only the FIRST paragraph that comes after ALL of the h3’s in the document. It ignores the 2^nd, 3^rd, 4^th paragraphs, etc.

h3 + p::first-line {
  color: red;
}

In CSS you can add more content without writing anything in HTML. The following will add the word “Top” to the end of your written h2 element. It will add it without any spaces, and will keep font-size, color, etc. of original h2 element.

h2::after {
  content: “Top”;
}

To make a stand alone item, like a “Top News Story” or “New” or “Price Lowered” for a h2:

Tip: remember to position your h2 to relative, so that the absolute position in the pseudo-element works. Like so:

h2 {
  position: relative;
}

h2::after {
  content: “TOP STORY”;
  background-color: yellow;
  color: black;
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 5px 10px;
  position: absolute;
  top: -10px;     (Negative numbers put the item above the top, outside of the block.)
  right: -25px;   (Negative numbers put the item to the right, outside of the block.)
}