<section class="gh-content gh-canvas">
        <p>The Caribbean Islands are renowned for their breathtaking beauty, crystal-clear turquoise waters, pristine white sandy beaches, and vibrant culture. With so many stunning destinations to choose from, it can be challenging to narrow down your choices. Whether you're seeking a romantic getaway, an adventurous escape, or simply a place to relax and unwind, the Caribbean has it all. In this article, I will present the 20 most beautiful Caribbean islands that deserve a spot on your bucket list. From the popular favorites to hidden gems, these islands will captivate you with their natural wonders, rich history, and warm hospitality.</p>
    </section>
$btn-bkg: #005670;
html {
  background: lighten($btn-bkg,75%);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.gh-content  {
  width: 75%;
  margin: 0 auto;
}

.after-content {
  width: 75%;
  margin: 0 auto;
  color: #005670;
  font-weight: bold;
  background-color: #8db9ca;
  padding: 0.25rem 0.5rem;
  text-align: center;
  border-radius: 5px;
}
View Compiled
// Wait for the HTML document to load
document.addEventListener("DOMContentLoaded", function() {
  // Find all elements with class "gh-content"
  var elements = document.getElementsByClassName("gh-content");

  // Loop through each element and append the HTML code
  for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    var htmlCode = "<p>This is the HTML code to display after the section.</p>";

    // Create a new element with class "after-content" to hold the HTML code
    var codeElement = document.createElement("div");
    codeElement.className = "after-content";
    codeElement.innerHTML = htmlCode;

    // Append the new element after the section element
    element.parentNode.insertBefore(codeElement, element.nextSibling);
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.