How Can I Create a Shorter Border Than My Div's Width?

Border Length Shallower Than Div Width

Your code defines a div element with a width of 200px and a solid 1px magenta border along its bottom edge. However, you seek a method to limit this border's length to just 100px without altering the div's width.

Pseudoelements provide a solution. Pseudoelements are elements added to your DOM tree, allowing you to style portions of an existing element. In this instance, you can create a pseudoelement that acts as the border:

div:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 50%;  /* or 100px */
  border-bottom:1px solid magenta;
}

This pseudoelement, which positions itself absolutely at the bottom left of the div, replicates the desired border length of 100px. By adjusting its width property, you can easily control the border's length without affecting the div's own width.

The above is the detailed content of How Can I Create a Shorter Border Than My Div's Width?. For more information, please follow other related articles on the PHP Chinese website!