<h1>
    Lorem Ipsum Dolor Sit Amet
</h1>

<hr/><hr/><hr/><hr/><hr/><hr/><hr/>

<div class="pseudo">
  ::before <!-- here is before -->
  <p>Your content</p>
  ::after <!-- here is after -->
</div>


<div class="quotation">
  <h2>Your content quotation</h2>
</div>

<div class="footnote">
  <h2>Your content footnote</h2>
</div>

<button class="button">&nbsp;</button>
<hr/><hr/><hr/><hr/><hr/><hr/><hr/>
<span>12 July, 2023</span>

<hr/><hr/><hr/><hr/><hr/><hr/><hr/>

<a href="#"></a>

<hr/><hr/><hr/><hr/><hr/><hr/><hr/>

<div class="card"></div>

<hr/><hr/><hr/><hr/><hr/><hr/><hr/>

<button class="buttonIcon">CodeCamp</button>

<hr/><hr/><hr/><hr/><hr/><hr/><hr/>

@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css';

h1::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.25em;
  background: linear-gradient(to right, #ff0000, #ffff00);
}
h1::before {
  content: "";
  display: block;
  width: 100%;
  height: 0.25em;
  background: linear-gradient(to left, #ff0000, #ffff00);
}

.pseudo::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.25em;
  background: linear-gradient(to right, #ff0000, #ffff00);
}
.pseudo::before {
  content: "";
  display: block;
  width: 100%;
  height: 0.25em;
  background: linear-gradient(to left, #ff0000, #ffff00);
}

.quotation {
  font-size: 2rem;
  position: relative;
}

.quotation::before {
  content: '"';
  position: absolute;
  font-size: 3rem;  
  left: 0em;
  top: -.75em;
}

.footnote {
   font-size: 2rem;
   position: relative;
}

.footnote::after {
  content: '*';
  position: absolute;
  font-size: 3rem;
  left: 0em;
  top: -.75em;
}

.button {
  position: relative;
  padding: 10px 20px;
  background-color: #3498db;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  width: 10%;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2980b9;
    opacity: 0.8;
    border-radius: 4px;
  }

  &:after {
    content: 'Hover Me';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 14px;
    font-weight: bold;
  }

  &:hover {
    background-color: #2980b9;
    cursor: crosshair;
    &:after {
      content: 'Hovered';
    }
  }
}

.card {
    padding: 20px;
    background-color: #f1f1f1;
    border-radius: 4px;
    position: relative;
    // Style the ::before pseudo-element within the .card selector
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }

    // Style the ::after pseudo-element within the .card selector
    &:after {
        content: 'Card Content';
        position: absolute;
        bottom: 10px;
        right: 10px;
        color: #888;
        font-size: 14px;
    }
}

// SCSS
@mixin icon($iconContent) {
  &:before {
    content: $iconContent;
    font-family: 'FontAwesome';
    font-size: 24px;
    margin-right: 10px;
  }
}

.buttonIcon {
  // Use the mixin to add an icon before the button text
  @include icon('\f2c5');

  // Rest of the button styles
  padding: 10px 20px;
  background-color: #27ae60;
  color: #fff;
  font-size: 16px;
  border: none;
  border-radius: 4px;
}

hr { border:0; }

span::before {
    content: '★';
    color: red;    
}

a::after {
  content: ' (Click here)';
  color: blue;
}