CSS Selectors

Table of Contents

::before reference

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

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

:before vs ::before discussion

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>