Niel Niel - 2 months ago 7
CSS Question

How can I show a vertical white border in my footer?

I need to make a vertical white border in my footer at around 90% of the width.

This is what it should look like:

enter image description here

I currently have the same as in the image but without the white line on the right.



footer {
width: 100%;
background-color: #CDDE47;
padding: 10px;
}

<footer>
<h2>Contact us</h2>
<p><em>You can find our physical location on:<br>
42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em>
</p>

<a href=""><em>+44 (2345) 345 456</em></a>
<br>
<a href=""><em>info@growiteatit.co.uk</em></a>

<ul>
<li><a href=""><em>Check out our facebook page</em></a>
</li>
<li><a href=""><em>Check out our twitter feed</em></a>
</li>
</ul>
</footer>




Answer

This can be achieved quite easily using the :after pseudoelement, which won't require you to modify your markup. Give the footer position:relative, then use CSS to place an absolutely-positioned bar inside it:

footer {
  width: 100%;
  background-color: #CDDE47;
  padding: 10px;
  position: relative;
}
footer:after {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  right: 50px;
  background: white;
  content: "";
}
<footer>
  <h2>Contact us</h2>
  <p><em>You can find our physical location on:<br>
            42 Tree lane, CB2345, Cambridge, Cambridgeshire, United Kingdom</em>
  </p>

  <a href=""><em>+44 (2345) 345 456</em></a>
  <br>
  <a href=""><em>info@growiteatit.co.uk</em></a>

  <ul>
    <li><a href=""><em>Check out our facebook page</em></a>
    </li>
    <li><a href=""><em>Check out our twitter feed</em></a>
    </li>
  </ul>
</footer>

Comments