Image divider above footer using ::before pseudo element-CodePudding

I am using Boostrap (5) and have simple footer like this:

<footer>
    <div >
        <div >
            <div >
                <h4>Cat 1</h4>
                <ul >
                    <li><a  href="#">A</a></li>
                    <li><a  href="#">B</a></li>
                    <li><a  href="#">C</a></li>
                </ul>
            </div>
            <div >
                <h4>Cat 2</h4>
                <ul >
                    <li><a  href="#">D</a></li>
                    <li><a  href="#">E</a></li>
                    <li><a  href="#">F</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

What I need is simple divider on top of it (above), adding 100px. Check the fiddle here: https://jsfiddle.net/Ls1vhncx/5

How can I get the same result using ::before pseudo element, so I can avoid extra div with no content?

CodePudding user response：

What you need is to target the footer.img-border::before and assign this class to your footer element in the DOM. Actually, you don't need to set the background-image on the footer.img-border but you have to do it directly on the footer.img-border::before pseudo element.

Check my reproducible example to see the result.

I am pretty sure this is what you need for generating this pseudo element with CSS.

footer {
  background: #555;
}
footer.img-border:: {
  height: 100px;
  width: 1920px;
  background-color: #555;
  background-position: center;
  background-attachment: fixed;
}

footer.img-border::before {
    content: "";
    display: block;
    width: 100%;
     background-image: url('https://cdn.shopify.com/s/files/1/0213/6954/files/pattern-1920x100px.png?v=1602752799');
    height: 100px;
}

<footer >
    <div >
        <div >
            <div >
                <h4>Cat 1</h4>
                <ul >
                    <li><a  href="#">A</a></li>
                    <li><a  href="#">B</a></li>
                    <li><a  href="#">C</a></li>
                </ul>
            </div>
            <div >
                <h4>Cat 2</h4>
                <ul >
                    <li><a  href="#">D</a></li>
                    <li><a  href="#">E</a></li>
                    <li><a  href="#">F</a></li>
                </ul>
            </div>
        </div>
    </div>
</footer>

CodePudding user response：

You can make space for the border by setting a top margin on the footer.

Then you can put a before pseudo element on it which has bottom 100% (ie sits on top of the footer) and it can have a width of 100% (I don't think you need to set a specific px value as you have done) and height of 100px.

footer {
  background: #555;
  position: relative;
  margin-top: 100px;
}

footer::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: 100%;
  left: 0;
  display: inline-block;
  background-image: url('https://cdn.shopify.com/s/files/1/0213/6954/files/pattern-1920x100px.png?v=1602752799');
  background-color: #555;
  background-position: center;
  background-attachment: fixed;
}

<footer>
  <div >
    <div >
      <div >
        <h4>Cat 1</h4>
        <ul >
          <li><a  href="#">A</a></li>
          <li><a  href="#">B</a></li>
          <li><a  href="#">C</a></li>
        </ul>
      </div>
      <div >
        <h4>Cat 2</h4>
        <ul >
          <li><a  href="#">D</a></li>
          <li><a  href="#">E</a></li>
          <li><a  href="#">F</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

Note: I am unclear about the use of background-attachment: fixed - which doesn't seem to be completely implemented on every browser. Do you need it?