點燈坊

失くすものさえない今が強くなるチャンスよ

Using after to Create Required Field

Sam Xiao's Avatar 2022-01-28

We often show a red * to indicate a required field. This can be done by after modifier.

Version

TailwindCSS 3.0

after

required000

A red * after Email means the required field.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>TailwindCSS</title>
</head>
<body>
  <label class="block w-fit ml-2 mt-2">
    <span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">
      Email
    </span>
    <input type="email" name="email" class="block w-full rounded-md sm:text-sm bg-white border shadow-sm border-slate-300 placeholder:text-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 px-3 py-2 mt-1" placeholder="you@example.com" />
  </label>
</body>

Line 10

<label class="block w-fit ml-2 mt-2">
  • block : convert <label> to block element
  • w-fit : adjust the width automatically as the content width
  • ml-2 : set left margin
  • mt-2 : set top margin

Line 11

<span class="after:content-['*'] after:ml-0.5 after:text-red-500 block text-sm font-medium text-slate-700">
  Email
</span>
  • after:content-['*'] : assign * on after modifier, which sets the content of the pseudo element
  • after:ml-0.5 : apply ml-0.5 on after modifier, which sets the left margin of the pseudo element
  • after:text-red-500 : apply text-red-500 on after modifer, which sets the text color of the pseudo element
  • block : convert <span> to block element
  • text-sm : set text size
  • font-medium : set font weight
  • text-slate-700 : set text color

Line 14

<input type="email" name="email" class="block w-full rounded-md sm:text-sm bg-white border shadow-sm border-slate-300 placeholder:text-slate-400 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 px-3 py-2 mt-1" placeholder="you@example.com" />
  • block : convert <input> to block element
  • w-full : set width as 100% of the parent width
  • rounded-md : set the border radius of an element
  • sm:text-sm : set text size on a small device
  • bg-white : set background color
  • border : set border width
  • shadow-sm : set outer shadow
  • border-slate-300 : set border color
  • placeholder:text-slate-400 : set placeholder color
  • focus:outline-none : apply outline-none on focus modifier, which hides the default browser outline on the focused element
  • focus:border-sky-500 : apply border-sky-500 on focus modifier, which sets the border color
  • focus:ring-sky-500 : apply ring-sky-500 on focus modifier, whichs sets the color of an outline ring
  • focus:ring-1 : apply ring-1 on focus modifier, which applies solid box-shadow of a specific thickness to an element
  • px-3 : set the horizontal padding of the
  • py-2 : set the vertical padding
  • mt-1 : set the top margin

Conclusion

  • Since after creates a pseudo element, we can use after just on <span>Email</span> element

Reference

TailwindCSS, Before and after

# TailwindCSS