CSS的边框底边长度

Question

I am working on the footer section of a webpage. I am trying to limit the length of border bottom in css but unfortunately I am not able to restrict its length for some reasons. I have created the fiddle for it.

The length of border-bottom which I want excatly is shown in this image .

The code which I have written in the fiddle are:

.footer p
{
  border-bottom: solid black;
}

Answer 1

The width (length) of your border will be exactly the width of your element. You can't set border to half of your element.

If you want to change lower the width of your border - lower the width of your element:

.footer p
{
  width: 50%;
  border-bottom: solid black;
}

Here is the jsfiddle:
https://jsfiddle.net/74zgg81d/

Another option is to set a container for that p element with the desired width (and that p will use 100% of it's parent's width):

<div class="footer">
    <div style="width: 150px">
        <p>
            ADDITIONAL INFO
        </p>
    </div>
</div>