Practical Examples of Before and After in CSS

  <label for="name" class="required">Name</label>
  <input type="text" id="name" name="name">

  <style>
  
  .required:after {
        content: "  *";
        color: red;
    }

  </style>

<div>
  <block-quote>The best way to predict the future is to invent it.</block-quote>
</div>

<style>

    block-quote { font-size: 3em; }
    block-quote:before{ content: open-quote; }
    block-quote:after{ content: close-quote; }

    block-quote:before,
    block-quote:after{
        display: inline-block;
        vertical-align: bottom;
        color: light-gray;
        font-size: 2em;
        top: .2em;
        position: relative;
    }

</style>

  
    <ul id="navigation-top">
        <li>Home</li>
        <li>Pages</li>
        <li>Blog</li>
        <li>Portfolio</li>
    </ul>

    <style>

        #navigation-top li {
            display: inline-block;
        }

        #navigation-top li:not(:first-child)::before {
            content : "|";
            padding-left: 1rem;  
        }

    </style>