如何在页脚中显示垂直的白色边框？

Question

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

This is what it should look like:

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 1

Give your footer position: relative and add a div.verticalLine inside of it defined as so:

.verticalLine{
    position: absolute;
    top: 0;
    right: 10%;
    width: 30px;
    height: 100%;
    background: #fff;
}

Answer 2

 footer { width: 100%; background-color: #CDDE47; padding: 10px; position: relative; /* 1 */ } footer::after { content: ""; /* 2 */ position: absolute; width: 25px; height: 100%; background-color: white; top: 0; right: 10%; } 

 <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> 

Notes:

1. Establish nearest positioned ancestor for absolute positioning .
2. Use an absolutely-positioned pseudo-element to create the border.

Answer 3

You could add a pseudo element with CSS

footer {
  width: 100%;
  background-color: #CDDE47;
  padding: 10px;
  position:relative;
}
footer:after{
    content:'';
    position:absolute;
    right:10%;
    width:10px;
    top:0;
    bottom:0;
    background-color:#fff;
}

---

Full demo

 footer { width: 100%; background-color: #CDDE47; padding: 10px; position:relative; } footer:after{ content:''; position:absolute; right:10%; width:10px; top:0; bottom:0; background-color:#fff; } 

 <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 4

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> 

Answer 5

add one div into footer

 footer { width: 100%; background-color: #CDDE47; } .a1 { width: 90%; border-right: 10px solid #fff; padding: 10px; } 

 <footer> <div class="a1"> <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> </div> </footer> 

Answer 6

You can add an inner wrapper and apply the border & padding to that.

 footer { width: 100%; background-color: #CDDE47; } .borderWrapper{ border-right: solid 8px #fff; width: 90%; padding: 10px; } 

 <footer> <div class="borderWrapper"> <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> </div> </footer> 

Answer 7

maybe use an :after pseudo element to create the white divider, and ensure the footer has position:relatve to contain the absolute element? eg

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

footer::after {
 content: '';
 position: absolute;
 width: 30px;
 background: white;
 right: calc(10% - 15px);
 top: 0;
 height: 100%;
}