深入了解::before和::after伪元素实用技巧

<p class="my-paragraph">
  I'm a paragraph!
</p>

.my-paragraph {
  padding: 20px;
  border: 4px dashed lightgray;
}

.my-paragraph::before {
  content: 'This is before!';
  color: hotpink;
}

.my-paragraph::after {
  content: 'This is after!';
  color: steelblue;
}

<h1>Elegant Heading</h1>

h1 {
  display: grid;
  grid-template-columns: minmax(50px, 1fr) auto minmax(50px, 1fr);
  align-items: center;
  text-align: center;
  gap: 40px;
}

h1::before, h1::after {
  content: '';
  border-top: 6px double;
}

<h1>Ribbon Heading</h1>

h1 {
  position: relative;
  margin: 0 auto 20px;
  padding: 10px 40px;
  text-align: center;
  background-color: #875e46;
}

h1::before, h1::after {
  content: '';
  width: 80px;
  height: 100%;
  background-color: #724b34;

  /* position ribbon ends behind and slightly lower */
  position: absolute;
  z-index: -1;
  top: 20px;
  
  /* clip ribbon end shape */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 25% 50%);

  /* draw and position the folded ribbon bit */
  background-image: linear-gradient(45deg, transparent 50%, #5d3922 50%);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: bottom right;
}

h1::before {
  left: -60px;
}

h1::after {
  right: -60px;
  transform: scaleX(-1); /* flip horizontally */
}

<blockquote lang="en">
  Hello! I am a block quote in English. Check out how the quotation marks are automatically added around me!
</blockquote>

<blockquote lang="fr">
  Salut ! Je suis une citation en français. Je ne connais pas le français, alors j’ai demandé à quelqu’un sur Twitter de le traduire !
</blockquote>

blockquote::before {
  content: open-quote;
}

blockquote::after {
  content: close-quote;
}

blockquote::before, blockquote::after {
  opacity: 0.25;
  padding: 0 10px;
  font-size: 3em;
}

blockquote {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20px;
  padding: 20px 10px;
  border-radius: 10px;
  background-color: #e5ddcb;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

q {
  quotes: '<' '>'; /* wrap all quotes with < and > */
}

q {
  quotes:
    '<' '>'      /* wrap outermost quotes with < and > */
    '<<' '>>'    /* then quotes nested one level deep with << and >> */
    '<<<' '>>>'; /* then quotes nested deeper with <<< and >>> */
}

<q>If you're fine with <q>unexplained phenomena</q> then go ahead.</q>

.customized {
  quotes: '→' '←';
}

.customized-nested {
  quotes: '⟪' '⟫' '⟨' '⟩';
}

.emoji {
  quotes: '😀💬"' '"';
}

q::before, q::after {
  color: #ff003c;
}

<a href="https://tacobell.com">Taco Bell</a>

a::after {
  content: ' → ' attr(href); /* show an arrow before the href */
}

input:checked {
  counter-increment: total;
}

output::before {
  content: counter(total);
}

div::before {
  content: url(image.png);
}

<div data-lives="3"></div>

div::before {
  content: url(mario.gif) ' × ' attr(data-lives);
}

div::before {
  content: '';
  background-image: url(image.png);
  display: block;
  width: 100px;
  height: 100px;
}

.replace {
  content: url(replace.png);
}

<span class="replace">This is text!</span>
<span class="replace"><img src="chicken-nugget.png" alt="chicken nugget"></span>
<img class="replace" src="chicken-nugget.png" alt="chicken nugget">

<ul>
  <li>Cupcakes are essentially cakes, but cuppier.</li>
  <li>The first cupcake was invented by Harley McCupcakken in 1796.</li>
  <li>Alright fine, I don't actually know anything about cupcakes.</li>
</ul>

li::marker {
  content: '🧁';
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

.clearfix {
  display: flow-root;
}

.inline-element::after {
  content: '\A';
  white-space: pre;
}

<form>
  <label for="email">Email address</label>
  <input autocapitalize="none" type="email" id="email" placeholder="like test@test.com" />
</form>

div::before {
  content: '';
  animation: flip 6s linear infinite;
}

@keyframes flip {
  from { content: 'Hello!'; }
  to { content: 'Goodbye!'; }
}

@property --num {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

div::before {
  counter-reset: my-counter var(--num);
  content: counter(my-counter);
  animation: count 10s ease-in-out infinite alternate;
}

@keyframes count {
  to { --num: 100; }
}

div::after {
  /* screen reader says nothing */
  content: '';
}

div::after {
  /* screen reader says "hello" */
  content: 'hello';
}

div::after {
  /* screen reader says "yellow five pointed star" */
  content: '⭐';
}

div::after {
  /* screen reader says "clockwise open circle arrow" */
  content: '↻';
}

div::after {
  /* screen reader says something like "image" or "unlabelled image" */
  content: url(image.png);
}

div::after {
  /* screen reader says "chicken nugget" */
  content: url(chicken-nugget.png) / 'chicken nugget';
}

div::after {
  /* screen reader says nothing */
  content: url(decorative-image.png) / '';
}

div::after {
  /* screen reader says nothing */
  content: '⭐' / '';
}

div::after {
  /* screen reader says "refresh" */
  content: '↻' / 'refresh';
}

div::after {
  content: '⭐';      /* Firefox and Safari will use this */
  content: '⭐' / ''; /* other browsers will use this */
}