Table of Contents

• ::before
• :before vs ::before
• Attribute selectors
• Show headerlinks on hover over headings

::before reference

Insert some text before the content of each <p> element:

p::before { 
  content: "Read this: ";
}

:before vs ::before discussion

• Putting aside browser support, there’s no difference between :before and ::before, or between :after and ::after.
• Prefer ::before to :before, as it's the newer standard.

With the introduction of CSS3, in order to make a differentiation between pseudo-classes and pseudo-elements (yes, they’re different), in CSS3 all pseudo-elements must use the double-colon syntax, and all pseudo-classes must use the single-colon syntax.

Attribute selectors reference

/* <a> elements with a title attribute */
a[title] {
  color: purple;
}

/* <a> elements with an href matching "https://example.org" */
a[href="https://example.org"] {
  color: green;
}

/* <a> elements with an href containing "example" */
a[href*="example"] {
  font-size: 2em;
}

/* <a> elements with an href ending ".org" */
a[href$=".org"] {
  font-style: italic;
}

Show headerlinks on hover over headings howto

a.headerlink {
  visibility: hidden;
}

h1:hover > a.headerlink,
h2:hover > a.headerlink,
h3:hover > a.headerlink,
h4:hover > a.headerlink,
h5:hover > a.headerlink,
h6:hover > a.headerlink, {
  visibility: visible;
}

Or, you can just use AnchorJS

<script src="/anchor.min.js"></script>
<script>
 anchors.add();
</script>