Can CSS Create Partial Borders Without Extra Elements?

Overcoming Border Length Limitations

Question:

Is there a method to restrict the extent of a border? Notably, a

has a bottom border, but you desire a left-aligned border that extends only partially up. Is it feasible to accomplish this without introducing additional elements to the page?

Answer:

CSS generated content offers a solution:

div {
  position: relative;
}

/* Main div for border to extend to 50% from bottom left corner */

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

<div>Lorem Ipsum</div>

The above is the detailed content of Can CSS Create Partial Borders Without Extra Elements?. For more information, please follow other related articles on the PHP Chinese website!

css restrict Length this border

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn