How Can I Control the Length of a CSS Border Without Extra HTML?

Customizing Border Length with CSS

As you're seeking to limit the length of a border without adding extra elements, let's delve into a CSS solution that achieves this gracefully.

To create a border that extends only partway up an element, you can leverage CSS generated content. Here's how it's done:

HTML:

<div>Lorem Ipsum</div>

CSS:

div {
  position: relative;
}

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}

In this CSS snippet:

• position: relative on the parent div allows positioning of the generated border absolutely.
• content: "" creates an empty element that will act as the custom border.
• background: black specifies the border color.
• position: absolute makes the generated element positionable.
• bottom: 0 and left: 0 position the border at the bottom left corner of the parent div.
• height: 50% restricts the border to half the height of the parent element.

This technique generates a border that extends only half the way up from the bottom left corner of the div without requiring additional HTML elements or sibling selectors.

The above is the detailed content of How Can I Control the Length of a CSS Border Without Extra HTML?. For more information, please follow other related articles on the PHP Chinese website!