Search code examples
csshtmlborder

Extend length of border css

How do I expand the length of a border past the length of my text? This is what I have so far:

    color: #8C4600;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 15px;
    border-bottom: 1px solid #D1D1D1;

This is the HTML: <li class = "vendors">VENDORS</li>

Solution

  • CSS borders are placed between the margins and padding of an HTML element. If you want the borders of an HTML element to extend past the width (or height) of that element, you can add CSS padding to the element in order to push the borders outward.

    For example, if your html is <li class=vendors">VENDORS</li> adding padding:0 10px; to your CSS would push the borders outwards on the right and left by 10px.