Menu
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>
820
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.
With CSS properties, we can only control the thickness of border; not length. However we can mimic border effect and control its width and height as we want with some other ways.
Definition and UsageThe border-bottom-width property sets the width of an element's bottom border. Note: Always declare the border-style or the border-bottom-style property before the border-bottom-width property. An element must have borders before you can change the width.
You can set height to inherit for the height of the table or calc(inherit - 2px) for a 2px smaller border. Remember, inherit has no effect when the table height isn't set. Use height: 50% for half a border.
Use padding and negative margins.
E.g.:
div {
padding: 1em;
margin: 0 -1em;
border-bottom: 1px solid red;
}
The above gives padding on all sides, and negative 1em margin on left and right. You may wish to fiddle w/ that.
123
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.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
